1.如何調(diào)試 IE 瀏覽器
- IE8以上有開(kāi)發(fā)者工具（高版本的IE開(kāi)發(fā)者工具兼容模式可以往下選擇兼容不同版本），F(xiàn)12打開(kāi)贝咙，如下圖：
- 也可以使用border: 1px solid red; outline: 1px solid red來(lái)快速幫組定位問(wèn)題所在。
- IETester瀏覽器測(cè)試工具拂募，可以模擬IE6.7.8.9渲染網(wǎng)頁(yè)庭猩。注：搜索了一下都是2、3年前的文章了陈症“可能不是很實(shí)用。
- 安裝虛擬機(jī)（比較靠譜但是比較麻煩的方法录肯。）
2.什么是CSS hack徙缴？在 CSS 和 HTML里如何寫(xiě) hack？在 CSS 中 ie6嘁信、ie7的 hack 方式？
注：搜索這個(gè)也是2疏叨、3年前的文章
因?yàn)樵缙跒g覽器渲染代碼方式不同潘靖，瀏覽器廠商也不知一家，所以就出現(xiàn)了兼容問(wèn)題蚤蔓。每個(gè)瀏覽器廠商都給自己設(shè)定了一個(gè)特別的符號(hào)卦溢，讓它們的瀏覽器能認(rèn)識(shí)這個(gè)符號(hào)后面的代碼，而其他瀏覽器對(duì)這個(gè)符號(hào)無(wú)視秀又，對(duì)它后面的代碼也會(huì)忽略单寂。CSS hack就是用來(lái)解決一些兼容問(wèn)題的方式。
IE6吐辙、IE7 中寫(xiě)CSS和HTML的hack：
HTML中：
1.注釋法:
IE條件注釋是微軟從IE5開(kāi)始就提供的一種非標(biāo)準(zhǔn)邏輯語(yǔ)句宣决。比如針對(duì)所有IE：<!–[if IE]><!–您的代碼–><![endif]–>，針對(duì)IE7以下版本：<!–[if lt IE 7]><!–您的代碼–><![endif]–>昏苏，這類(lèi)Hack不僅對(duì)CSS生效尊沸，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都 會(huì)生效。
CSS中:前綴法：
比如IE6能識(shí)別_和*贤惯，IE7能識(shí)別*洼专，但不能識(shí)別_。
比如IE6能識(shí)別*html .class{}孵构，IE7能識(shí)別*+html .class{}或者*:first-child+html .class{}屁商。
/* CSS屬性級(jí)Hack */ color:red; /* 所有瀏覽器可識(shí)別*/ _color:red; /* 僅IE6 識(shí)別 */ *color:red; /* IE6、IE7 識(shí)別 */ +color:red; /* IE6颈墅、IE7 識(shí)別 */ *+color:red; /* IE6蜡镶、IE7 識(shí)別 */ [color:red; /* IE6雾袱、IE7 識(shí)別 */ color:red\9; /* IE6、IE7帽哑、IE8谜酒、IE9 識(shí)別 */ color:red\0; /* IE8、IE9 識(shí)別*/ color:red\9\0; /* 僅IE9識(shí)別 */ color:red \0; /* 僅IE9識(shí)別 */ color:red!important; /* IE6 不識(shí)別!important*/
/* CSS選擇符級(jí)Hack */ *html #demo { color:red;} /* 僅IE6 識(shí)別 */ *+html #demo { color:red;} /* 僅IE7 識(shí)別 */ body:nth-of-type(1) #demo { color:red;} /* IE9+妻枕、FF3.5+僻族、Chrome、Safari屡谐、Opera 可以識(shí)別 */ head:first-child+body #demo { color:red; } /* IE7+述么、FF、Chrome愕掏、Safari度秘、Opera 可以識(shí)別 */ :root #demo { color:red\9; } : /* 僅IE9識(shí)別 */
/* IE條件注釋Hack */
3.列舉幾種 瀏覽器兼容問(wèn)題？
1. <!DOCTYPE HTML>聲明饵撑。
在IE6下如果沒(méi)有寫(xiě)DOCTYPE聲明剑梳，瀏覽器將使用怪異模式渲染網(wǎng)頁(yè)。
2.各廠商的默認(rèn)margin和padding值不同滑潘。
ie:
chrome:
解決方法：*{margin:0;padding:0;}
3.inline-block垢乙；
在IE下只能讓它變成inline元素，然后觸發(fā)塊元素的 layout语卤，使它看起來(lái)像inline-block;
display: inline-block;*display: inline;zoom: 1;
4.橫向雙倍外間距：
- 當(dāng)在IE6下浮動(dòng)元素后追逮，會(huì)出現(xiàn)橫向雙倍margin。
解決辦法： 在float標(biāo)簽的樣式控制中加入display：inline
4.針對(duì)兼容粹舵、多瀏覽器覆蓋有什么看法钮孵？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思？
- 兼容眼滤、多瀏覽器覆蓋只是瀏覽器發(fā)展的一個(gè)過(guò)程巴席，我們處在這個(gè)過(guò)程中，從瀏覽器的發(fā)展歷史柠偶，早期的各廠商渲染方式不一到現(xiàn)在的w3c規(guī)范情妖，瀏覽器的發(fā)展始終要規(guī)范化，這是趨勢(shì)诱担，也更有利于開(kāi)發(fā)環(huán)境和用戶體驗(yàn)毡证。目前針對(duì)兼容，多瀏覽器覆蓋是不可避免的蔫仙，畢竟各廠商瀏覽器都有自己的用戶群體料睛，而網(wǎng)頁(yè)是要給所有人看的。
- 漸進(jìn)增強(qiáng)：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能恤煞，然后在針對(duì)高級(jí)瀏覽器進(jìn)行效果屎勘、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。 - 優(yōu)雅降級(jí)：
一開(kāi)始就針對(duì)高版本瀏覽器進(jìn)行頁(yè)面構(gòu)建居扒，然后再針對(duì)低版本瀏覽器進(jìn)行兼容概漱。
5.reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css:是將所有的瀏覽器的自帶樣式重置掉喜喂，這樣更易于保持各瀏覽器渲染的一致性瓤摧。
- normalize.css:它正是針對(duì)只需要統(tǒng)一的元素樣式。該項(xiàng)目依賴(lài)于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異玉吁，精確定位需要重置的樣式照弥。
- normalize.css優(yōu)勢(shì)：
? 1. Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值
Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺(jué)效果进副。 相比之下这揣，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。 這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式影斑。 當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)给赞，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。
? 2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見(jiàn)的桌面端和移動(dòng)端瀏覽器的bug矫户。這往往超出了Reset所能做到的范疇塞俱。 關(guān)于這一點(diǎn)，Normalize.css修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置吏垮、預(yù)格式化文字的font-size問(wèn)題、在IE9中SVG的溢出罐旗、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug膳汪。
? 3. Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過(guò)于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示九秀。在Normalize.css中就不會(huì)有這樣的問(wèn)題遗嗽，因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用時(shí)非常謹(jǐn)慎的，我們僅會(huì)有目的地對(duì)目標(biāo)元素設(shè)置樣式鼓蜒。
? 4. Normalize.css 是模塊化的
這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分痹换，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）都弹。
? 5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試娇豫。這個(gè)文件中擁有詳細(xì)的代碼說(shuō)明并在Github Wiki中有進(jìn)一步的說(shuō)明。這意味著你可以找到每一行代碼具體完成了什么工作畅厢、為什么要寫(xiě)這句代碼冯痢、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測(cè)試。 這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的浦楣，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染袖肥。
6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用?
1. 回到之前的盒模型,如下圖：
可以看出：
- IE盒模型：width=border+padding+content。
- W3C盒模型:width=content.
2.IE678使用標(biāo)準(zhǔn)盒模型：
- 在html最前面添加<!DOCTYPE html>聲明振劳。
3.sizing:border-box作用：
- 使盒模型設(shè)定成IE盒模型的方式來(lái)計(jì)算寬度椎组。
1.實(shí)操安裝虛擬機(jī)
2.在 ie 6, 7, 8中展示 盒模型、inline-block历恐、max-width的區(qū)別寸癌。
- 展示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
*{margin:0;padding:0;}
.box-mode{
border:1px solid pink;
height: 100px;
width: 100px;
background: #eee;
padding:20px;
margin:20px;
}
.inline-block{
border:1px solid pink;
height: 100px;
width: 100px;
background: #333;
display: inline-block;
}
.max-width{
border:1px solid;
max-width:100px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div class="box-mode"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="max-width"></div>
</body>
</html>
chrome V52：
IE6：
IE7：
IE8：
總結(jié)：
- 盒模型因?yàn)?lt;!DOCTYPE html>聲明的緣故所以W3C標(biāo)準(zhǔn)盒模型渲染，三張圖無(wú)差異夹供。
- inline-block：從上圖看出IE6\7不支持灵份，IE8正常顯示。
- max-width：從上圖看出IE6不支持哮洽，IE7/8支持填渠。
本文版權(quán)歸多彩和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源Ｄ窀ā７帐病！
