1. 如何調(diào)試 IE 瀏覽器？

1. 使用高版本 IE 的控制臺，（ IE7 及以上所有版本都有調(diào)試臺，按 F12 啟動。 ）
2. border: 1px solid red;
3. outline: 1px solid red;
4. javascript:alert(document.get...)

2. 什么是 CSS hack？在 CSS 和 HTML 里如何寫 hack？在 CSS 中 IE6、IE7 的 hack 方式？

CSS hack: 利用某些瀏覽器自身的 bug 寫出一些特定（妥協(xié)）的樣式。

CSS hack分類:

CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。

1. 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線""和星號" "，IE7能識別星號" "，但不能識別下劃線""，IE6~IE10都認(rèn)識"\9"，但firefox前述三個都不能認(rèn)識
2. 選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}
3. IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對IE6及以下版本： 。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效

參考鏈接：

1. 條件注釋與CSS hack
2. 條件注釋
3. 史上最全的CSS hack方式一覽

3. 列舉幾種瀏覽器兼容問題？

1. inline-block在ie8以上才得以支持。
2. 偽類before和after ie8部分支持，以上支持。
3. 偽類link、hover、active和visited使用在非a標(biāo)簽元素上，IE8以下不支持。
4. 所有的html5新增語義化標(biāo)簽，對于IE8以下都不支持。
5. rgba和opacity設(shè)置透明度。IE8以上支持。
6. CSS3中新增canvas屬性，IE9及以上支持。
7. rotate旋轉(zhuǎn)屬性。IE瀏覽器均不支持。

4. 針對兼容、多瀏覽器覆蓋有什么看法？漸進(jìn)增強和優(yōu)雅降級是什么意思？

根據(jù)瀏覽器用戶分布而適當(dāng)采用相應(yīng)的措施。簡單來說，如果 IE（低版本）用戶多或者增益多，兼容；少或者增益少，放棄兼容。當(dāng)然，這得有數(shù)據(jù)的支持。

漸進(jìn)增強是保證基本效果的情況下增強效果，優(yōu)雅降級是保證最惡劣情況下的基本效果。

優(yōu)雅降級 ： 從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給。

漸進(jìn)增強 ： 從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。

優(yōu)雅降級意味著往回看、而漸進(jìn)增強則意味著朝前看，同時保證其根基處于安全地帶。

參考鏈接：

1. 高效完成瀏覽器兼容性測試
2. 瀏覽器市場份額

5. reset.css 和 normalize.css 分別是做什么的？為什么推薦使用 normalize.css？

reset.css

各個標(biāo)簽，元素在各瀏覽器中的默認(rèn)樣式不同，造成它們?nèi)ヤ秩鞠嗤脑创a渲染出不同的效果，為消除這種效果，reset.css將所有的元素的默認(rèn)樣式清除，再由開發(fā)者重新定義。

normalize.css

normalize,css的理念是盡量保存瀏覽器的默認(rèn)樣式，而不進(jìn)行太多的重置，但它所提供的默認(rèn)樣式讓各個瀏覽器保持了高度的一致，相對于傳統(tǒng)的reset.css，它是一種新型的，為html5準(zhǔn)備的優(yōu)質(zhì)替代方案。

• 保護(hù)游泳的瀏覽器默認(rèn)樣式而不是簡單粗暴的全部清除
• 為絕大多數(shù)的html元素提供相同的一般化樣式
• 對瀏覽器所存在的bug，讓各個瀏覽器保持一致
• 使用一些小技巧優(yōu)化css的可用性
• normalize.css是模塊化的
• normalize.css支持包括手機瀏覽器在內(nèi)的絕大多數(shù)瀏覽器，同時對html5中的標(biāo)簽、樣式、排版。列表、表單、表格等內(nèi)容都進(jìn)行了一般化。

拓展閱讀：

來，讓我們談一談 Normalize.css

6. IE 盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別？怎樣使 IE6 7 8 使用標(biāo)準(zhǔn)盒模型？box-sizeing:border-box 有什么用？

• IE 盒模型「IE6 7 8 怪異模式（不添加 DOCTYPE）」：width = border + padding + content
• 標(biāo)準(zhǔn)盒模型：width = content

對比圖：

盒模型對比.png

另外，設(shè)置DOCTYPE，即可使 IE6 7 8 使用標(biāo)準(zhǔn)盒模型。

box-sizing: border-box，即令盒子按照 IE 盒模型的計算規(guī)律。（即，width = border + padding + content）

如果設(shè)置了 box-sizing: border-box; 和 width 的寬度（border + padding + content）就會限定死了。在這個基礎(chǔ)上，再設(shè)置 padding 或者 border 的寬度，這時候，就只能壓榨 content 的寬度了。

補充：

flex 布局：參考鏈接