1.如何調(diào)試 IE 瀏覽器
- IE8以上有開發(fā)者工具（高版本的IE開發(fā)者工具兼容模式可以往下選擇兼容不同版本），F(xiàn)12打開，如下圖：
- 也可以使用border: 1px solid red; outline: 1px solid red來快速幫組定位問題所在。
- IETester瀏覽器測試工具，可以模擬IE6.7.8.9渲染網(wǎng)頁。注：搜索了一下都是2、3年前的文章了?？赡懿皇呛軐嵱谩?/strong>
- 安裝虛擬機(jī)（比較靠譜但是比較麻煩的方法。）
2.什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
注：搜索這個也是2、3年前的文章
因為早期瀏覽器渲染代碼方式不同，瀏覽器廠商也不知一家，所以就出現(xiàn)了兼容問題。每個瀏覽器廠商都給自己設(shè)定了一個特別的符號，讓它們的瀏覽器能認(rèn)識這個符號后面的代碼，而其他瀏覽器對這個符號無視，對它后面的代碼也會忽略。CSS hack就是用來解決一些兼容問題的方式。
IE6、IE7 中寫CSS和HTML的hack：
HTML中：
1.注釋法:
IE條件注釋是微軟從IE5開始就提供的一種非標(biāo)準(zhǔn)邏輯語句。比如針對所有IE：<!–[if IE]><!–您的代碼–><![endif]–>，針對IE7以下版本：<!–[if lt IE 7]><!–您的代碼–><![endif]–>，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都 會生效。
CSS中:前綴法：
比如IE6能識別_和*，IE7能識別*，但不能識別_。
比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
/* CSS屬性級Hack */ color:red; /* 所有瀏覽器可識別*/ _color:red; /* 僅IE6 識別 */ *color:red; /* IE6、IE7 識別 */ +color:red; /* IE6、IE7 識別 */ *+color:red; /* IE6、IE7 識別 */ [color:red; /* IE6、IE7 識別 */ color:red\9; /* IE6、IE7、IE8、IE9 識別 */ color:red\0; /* IE8、IE9 識別*/ color:red\9\0; /* 僅IE9識別 */ color:red \0; /* 僅IE9識別 */ color:red!important; /* IE6 不識別!important*/
/* CSS選擇符級Hack */ *html #demo { color:red;} /* 僅IE6 識別 */ *+html #demo { color:red;} /* 僅IE7 識別 */ body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識別 */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識別 */ :root #demo { color:red\9; } : /* 僅IE9識別 */
/* IE條件注釋Hack */
3.列舉幾種 瀏覽器兼容問題？
1. <!DOCTYPE HTML>聲明。
在IE6下如果沒有寫DOCTYPE聲明，瀏覽器將使用怪異模式渲染網(wǎng)頁。
2.各廠商的默認(rèn)margin和padding值不同。
ie:
chrome:
解決方法：*{margin:0;padding:0;}
3.inline-block；
在IE下只能讓它變成inline元素，然后觸發(fā)塊元素的 layout，使它看起來像inline-block;
display: inline-block;*display: inline;zoom: 1;
4.橫向雙倍外間距：
- 當(dāng)在IE6下浮動元素后，會出現(xiàn)橫向雙倍margin。
解決辦法： 在float標(biāo)簽的樣式控制中加入display：inline
4.針對兼容、多瀏覽器覆蓋有什么看法？漸進(jìn)增強和優(yōu)雅降級是什么意思？
- 兼容、多瀏覽器覆蓋只是瀏覽器發(fā)展的一個過程，我們處在這個過程中，從瀏覽器的發(fā)展歷史，早期的各廠商渲染方式不一到現(xiàn)在的w3c規(guī)范，瀏覽器的發(fā)展始終要規(guī)范化，這是趨勢，也更有利于開發(fā)環(huán)境和用戶體驗。目前針對兼容，多瀏覽器覆蓋是不可避免的，畢竟各廠商瀏覽器都有自己的用戶群體，而網(wǎng)頁是要給所有人看的。
- 漸進(jìn)增強：
針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后在針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。 - 優(yōu)雅降級：
一開始就針對高版本瀏覽器進(jìn)行頁面構(gòu)建，然后再針對低版本瀏覽器進(jìn)行兼容。
5.reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
- reset.css:是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性。
- normalize.css:它正是針對只需要統(tǒng)一的元素樣式。該項目依賴于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異，精確定位需要重置的樣式。
- normalize.css優(yōu)勢：
? 1. Normalize.css 保護(hù)了有價值的默認(rèn)值
Reset通過為幾乎所有的元素施加默認(rèn)樣式，強行使得元素有相同的視覺效果。 相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。 這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。 當(dāng)一個元素在不同的瀏覽器中有不同的默認(rèn)值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。
? 2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。 關(guān)于這一點，Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。
? 3. Normalize.css 不會讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的準(zhǔn)則中對多選擇器的使用時非常謹(jǐn)慎的，我們僅會有目的地對目標(biāo)元素設(shè)置樣式。
? 4. Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）。
? 5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測試。 這個項目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時也讓人們很容易地明白如何改進(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盒模型的方式來計算寬度。
1.實操安裝虛擬機(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é)：
- 盒模型因為<!DOCTYPE html>聲明的緣故所以W3C標(biāo)準(zhǔn)盒模型渲染，三張圖無差異。
- inline-block：從上圖看出IE6\7不支持，IE8正常顯示。
- max-width：從上圖看出IE6不支持，IE7/8支持。
本文版權(quán)歸多彩和饑人谷所有，轉(zhuǎn)載請注明來源！??！
