如何調(diào)試IE瀏覽器
- 1.IE7.0及以上IE版本可使用IE自帶的控制臺工具調(diào)試。
- 2.可以安裝虛擬機再安裝不同版本的IE去調(diào)試
- 3.在CSS中使用邊框調(diào)試，border: 1px solid red;和outline:1px solid red;顯示盒模型調(diào)試，適用IE6及以下版本
- 4.用IETest調(diào)試，模擬不同版本的IE瀏覽器，但模擬效果不能完全還原真實IE環(huán)境。chrome開發(fā)者調(diào)試工具：
什么是CSS hack？在CSS和HTML里如何寫hack？在CSS中ie6ie7的hack方式？
由于不同廠商的瀏覽器chrome、safari、firefox、IE對CSS文件解析渲染結果不一致，甚至同一瀏覽器的不同版本的產(chǎn)品對CSS文件解析渲染結果不一致，得不到我們需要的結果。CSS hack的目的是使CSS代碼兼容不同的瀏覽器，或使用CSS hack為不同瀏覽器設置不同css效果。IEbug無窮無盡，因為渲染的標準不同，IE先出現(xiàn)的，在此之后后才有w3c渲染標準
CSShack參考網(wǎng)站：browserhacks.com,caniuser.com
CSS和HTML里寫hack有以下幾種方法：
- 1.css屬性前綴法 Property/Value Hacks 只針對某個瀏覽器才可見的屬性，一般是屬性前加特殊符號IE6、IE7（*）
.box{*background:yellow;}```
- 2.選擇器前綴法：例如 IE6能識別html .class{}，IE7能識別+html .class{ }
```html
*html .box{ /*IE6.0*/
background:yellow;
}
*+html .box{ /*IE7.0*/
background:yellow;
}
- 3.cc(ie conditional comments)IE條件注釋（win10起不支持條件注釋，將與其他瀏覽器一樣解析成注釋）
[if !IE]不等于IE、[if lt IE 6]小于IE6、[if lte IE 6]小于等于IE6
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if IE 8]><body class="ie8"><![endif]-->
<!--[if IE 9]><body class="ie9"><![endif]-->
<!--[if !IE]>-->
body
<!--<![endif]-->
</body>
列舉幾種瀏覽器兼容問題
1.display:inline-block IE6、IE7不支持該屬性，需要添加以下語句
*display:inline;
*zoom:1;
2.opacity IE8及以下版本不支持
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60); /* IE 4-7 */
zoom: 1;
針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優(yōu)雅降級是什么意思？
IEbug無窮無盡，因為渲染的標準不同，瀏覽器的兼容是個費時費力的專題工程。所以在項目啟動之初需要對項目的使用場景做調(diào)研，了解用戶各瀏覽器的使用份額。比如銀行或政府機構網(wǎng)站IE瀏覽器的使用率高。由調(diào)研情況來確定技術選型。
漸進增強：開發(fā)過程側重適配低版本瀏覽器，先保證最基本功能和易用性，然后再針對高級瀏覽器進行效果、交互等功能的改進。保證低版本瀏覽器用戶的基本功能和易用性基礎上，再完善高版本瀏覽器用戶的更好體驗。
優(yōu)雅降級:側重適配高版本瀏覽器，使網(wǎng)頁在好看又好用的基礎上，再考慮對低版本瀏覽器的兼容。比如在低版本瀏覽器上僅保證功能可用，允許與高版本瀏覽器實際渲染效果出現(xiàn)細微差異，或放棄某些特效。對于復雜度太高的兼容可考慮放棄。
瀏覽器兼容程度分級：
A級 好看而且好用 適配chrome/firefox/safari
B級 好用，視覺效果允許細微偏差 適配IE8/IE9
C級 可以用，視覺效果不考慮 適配IE8以下瀏覽器
reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
HTML標簽在瀏覽器中都有默認的樣式，不同的瀏覽器的默認樣式之間是存在區(qū)別的，例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin來實現(xiàn)的，而在Firefox下卻是由padding來實現(xiàn)的。所以開發(fā)時瀏覽器的默認樣式可能會給我們帶來多瀏覽器的兼容問題，影響開發(fā)效率。reset.css和normaliz.css都是用來將瀏覽器的默認樣式覆蓋掉，達到多個瀏覽器的一致性。
resset.css是將瀏覽器所有默認樣式全部重置，作用范圍很大。reset會在瀏覽器調(diào)試工具中有大段的繼承鏈，而 normalize.css不會。
normalize.css保護了有價值的默認值，保持了許多默認的瀏覽器樣式。修復了常見的桌面端和移動端瀏覽器的bug，這超出了reset所能做到的范疇。
IE盒模型和標準盒模型有什么區(qū)別?怎樣使IE678使用標準盒模型?box-sizing:border-box有什么作用
IE盒模型 box-sizing:border-box;寬度、高度=盒模型邊框+padding+（內(nèi)容寬度或高度）
標準盒模型 box-sizing:content-box; 寬度、高度=width、height
在IE678中添加DOCTYPE聲明即可遵循標準盒模型，不加doctype聲明則使用怪異模式即IE盒模型。
在ie6,7,8中展示盒模型、inline-block、max-width的區(qū)別
IE6
IE7
IE8
