1、如何調(diào)試IE？

• 首先，我們得知道IE的版本號：通過左上角工具（或幫助）中，點擊關(guān)于Internet Explorer來查詢。

IE11

IE6

• IE7及其以上都有控制臺，打開方式和其他瀏覽器一樣（F12）調(diào)試方式也基本相同。值得注意的是，IE瀏覽器存在仿真模式去模擬低版本IE的頁面情況。

仿真調(diào)試

• 盡管IE控制臺的仿真模式能夠在一定程度上反應(yīng)低版本IE的樣式，但畢竟模擬和現(xiàn)實還是會有差距，所以最保險的方式是安裝虛擬機(jī)，在虛擬機(jī)上安裝各個版本的IE瀏覽器，親自實踐。

2、什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？

CSS hack：通俗的說就是利用BUG去調(diào)試BUG的手段。瀏覽器對于HTML和CSS的解析方式不同，造成了某種特定的寫法只有在幾個或者是單個瀏覽器中才能識別，這樣我們就可以利用這種寫法來解決CSS樣式在瀏覽器中的兼容問題。

常見的hack的書寫一般存在3種方式：

• 選擇器前綴法

*html {}   //*前綴只對IE6生效
*+html {} //*+前綴只對IE7生效

• 類內(nèi)屬性前綴法

.container{ _color: red;/*IE6識別*/
                  *color: red;/*IE6,IE7識別*/ 
                   color: red\9;/*IE6-IE10識別*/
                   color: red\0;/*IE8-IE10識別*/
                   color: red\9\0;/*IE9,IE10識別*/ }

• 條件注釋法

    <!--[if IE]>
    這段文字只在IE瀏覽器顯示
    <![endif]-->

    <!--[if IE 6]>
    這段文字只在IE6瀏覽器顯示
    <![endif]-->
    
    <!--[if gte IE 6]>
    這段文字只在IE6以上(包括)版本IE瀏覽器顯示
    <![endif]-->

    <!--[if ! IE 8]>
    這段文字在非IE8瀏覽器顯示
    <![endif]-->
    
    <!--[if !IE]>
    這段文字只在非IE瀏覽器顯示
    <![endif]-->

這些注釋只有IE11以下的瀏覽器才會不將其當(dāng)做注釋，其它的瀏覽器會將其自動忽略。
對于hack的學(xué)習(xí)講究淺嘗則止，無需花深功夫去研究（太多，太雜），知道解決問題的思路（控制臺調(diào)試），以及google即可。

reference:史上最全的CSS hack

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

• inline-block:IE8及其以上全部支持，IE6、7只支持inline->inline-block;
• opacity: IE8及其以下不支持，用filter:alpha(opacity=50)代替；
• 偽類選擇器在低版本的IE中實現(xiàn)效果很差......;
• CSS3的新增功能基本上都不兼容。

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

網(wǎng)頁制作的目的是滿足客戶的需求，如果針對政府、企業(yè)內(nèi)部、銀行、事業(yè)單位等這種只在特定工作場合、特定瀏覽器、只追求穩(wěn)定的客戶的話，那僅僅只需要進(jìn)行針對性的網(wǎng)頁開發(fā)，不需要滿足或者微量滿足兼容性即可。
但是互聯(lián)網(wǎng)公司的用戶來自五湖四海，每個人的瀏覽器都可能不盡相同，此時我們就需要進(jìn)行市場分析，維護(hù)好主流瀏覽器的開發(fā)，保證小眾瀏覽器的功能實現(xiàn)，適當(dāng)放棄微量的個性化差異，以此節(jié)約開發(fā)周期和維護(hù)成本。
上述的兩種模式其實就是所謂的漸進(jìn)增強(qiáng)與優(yōu)雅降級的思維模式。

• 漸進(jìn)增強(qiáng)講究的是：從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。
• 優(yōu)雅降級講究的是：從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給。

兩種思路無好壞對錯，選擇與否還是根據(jù)用戶需求。

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

由于上古時代，W3標(biāo)準(zhǔn)并未有現(xiàn)在如此的權(quán)威性，早期的瀏覽器支持和理解的CSS規(guī)范不同，導(dǎo)致渲染頁面時效果不一致，會出現(xiàn)很多兼容性問題。為了解決這個問題，reset.css誕生了，它暴力的把html標(biāo)簽的許多默認(rèn)樣式全部歸零，人們基于reset.css的基礎(chǔ)上再根據(jù)自我需求自定義各標(biāo)簽樣式。
隨著時間的推移，現(xiàn)代瀏覽器對于標(biāo)準(zhǔn)的把控趨于統(tǒng)一，并且人們認(rèn)為將HTML的默認(rèn)樣式一棒子打死的行為純屬于脫褲子放屁--多此一舉，于是在reset.css的基礎(chǔ)上，nomalize.css保留了大量的HTML默認(rèn)樣式，并且做了許多瀏覽器兼容上的努力，做到了取其精華，去其糟粕的思路。
nomalize.css的優(yōu)勢如下：
<blockquote>

1. Normalize.css 保護(hù)了有價值的默認(rèn)值
   Reset通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。相比之下，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è)置樣式。

3. Normalize.css 是模塊化的
   這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）。

4. Normalize.css 擁有詳細(xì)的文檔
   Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測試。這個項目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。
   </blockquote>
   參考：
   關(guān)于CSS Reset 那些事（一）之 歷史演變與Normalize.css
   Normalize.css 和 Reset CSS 有什么本質(zhì)區(qū)別沒？
   normalize.css

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

IE盒模型：width/height=content+padding+border;
標(biāo)準(zhǔn)盒模型：width/height=content;

盒模型對比

在IE6/7/8瀏覽器下，聲明DOCTYPE即可變?yōu)闃?biāo)準(zhǔn)盒模型。

box-sizing是CSS3的新屬性，其值有如下三種：

box-sizing

content-box是標(biāo)準(zhǔn)盒模型，border-box就是IE盒模型。

補(bǔ)充：flex手冊