在 IE 瀏覽器上進(jìn)行調(diào)試
- 在高版本的IE瀏覽器如IE8以上，有開發(fā)者工具，按F12調(diào)出，可以選擇不同的瀏覽器版本進(jìn)行調(diào)試（除了IE6，IE6可以通過設(shè)置border或使用javascript來測試）。
CSS hack的含義及在 CSS 中 ie6、ie7的使用
- CSS hack是CSS使用中的一些奇怪的做法(與現(xiàn)行的標(biāo)準(zhǔn)用法不同，早期的瀏覽器如IE6出來時并沒有統(tǒng)一的渲染標(biāo)準(zhǔn))，主要是針對低版本的IE瀏覽器的兼容性來使用的。
- 在HTML中hack的寫法一般有三種
①屬性前綴：直接在CSS選擇器內(nèi)部的屬性前加僅低版本IE能識別的符號*_等；IE6能識別*_,例如*display：inline；而IE7能識別*但不能識別_。
②選擇器前綴：在CSS選擇器前加僅低版本IE能識別的符號；IE6能識別*，如*p{}；而IE7能識別*+，如*+p{}
③條件注釋:針對一大段的CSS hack可以用``來做兼容，if IE可以改成其他條件，如if IE6等
常見瀏覽器兼容問題
- 不支持部分標(biāo)簽或?qū)傩裕豪鏘E6不支持
display:inline-block,因為其內(nèi)部沒有關(guān)于此屬性的定義和解析方式，這個時候我們就只能退而求其次使用display:inline來保證至少排版不要差異太大，當(dāng)然也可以用其他方式如浮動來達(dá)成類似的效果，同樣的例子還有min-height等. - 不同瀏覽器的默認(rèn)設(shè)置差異：例如低版本的IE盒模型與標(biāo)準(zhǔn)盒模型的差異（下面問題會提到）；又或者默認(rèn)的margin和padding差異，所以一般在css來頭會有一個*通配符來修改默認(rèn)的的margin和padding為0。
對兼容、多瀏覽器覆蓋的看法及漸進(jìn)增強(qiáng)和優(yōu)雅降級的理解
- 兼容和多瀏覽器覆蓋是歷史遺留問題，是在瀏覽器發(fā)展和W3C標(biāo)準(zhǔn)的建立中逐漸產(chǎn)生的，我認(rèn)為開發(fā)人員需要抓住主要需求，針對主瀏覽器做開發(fā)，最后再去做兼容和多瀏覽器覆蓋，要分清主次，明白錦上添花的含義。最終前端開發(fā)人員理想的狀況是不需要兼容；針對前端入門的新手我認(rèn)為重點(diǎn)在學(xué)習(xí)其他重點(diǎn)知識，對兼容是要去理解，也要知道如果碰到此問題要如何去搜索尋找解決方法，保持有意識也懂方法的前提下先去補(bǔ)充其他知識。
- 漸進(jìn)增強(qiáng)、優(yōu)雅降級的主要思想是一樣的，就是先指針對需求，適配1~2款瀏覽器去做主開發(fā)。如果是先針對現(xiàn)代瀏覽器的話，就可以優(yōu)雅降級，不追求畫面多炫功能多強(qiáng)大，針對低版本如IE7等做些兼容能實現(xiàn)基礎(chǔ)功能即可；而如果一開始是部分政府項目，是針對IE6、7等低版本瀏覽器做的開發(fā)的話，就可以漸進(jìn)增強(qiáng)，針對現(xiàn)代瀏覽器修改部分CSS去實現(xiàn)一些相對較先進(jìn)方便的功能把頁面做得更漂亮一點(diǎn)。
reset.css和normalize.css的作用與區(qū)別
- reset.css是用于去除瀏覽器預(yù)先給標(biāo)簽設(shè)置的默認(rèn)樣式，如h標(biāo)題的加粗和margin、li前面的小圓點(diǎn)等，有時候我們并不需要這些默認(rèn)設(shè)置，就可以在CSS開頭進(jìn)行CSS重置，就是reset.css。
- normalize.css是reset.css的改良版，他是在reset的基礎(chǔ)上進(jìn)行改良避免誤傷，保留了一些有價值的默認(rèn)樣式，還增加了其他功能，也沒有reset.css的一些缺點(diǎn)。
- 相比與reset.css，normalize.css有以下幾個優(yōu)點(diǎn)：①它保留了部分有價值的默認(rèn)樣式，而且努力使不同瀏覽器的默認(rèn)值保持一致盡量讓表現(xiàn)接近現(xiàn)代標(biāo)準(zhǔn)；
②它修復(fù)部分瀏覽器的問題和bug（目前我還不大理解）；
③它沒有reset.css的長串繼承鏈，調(diào)試的時候不會顯得很亂；
④它是模塊化的，你可以清楚地知道哪些元素設(shè)置了什么值，同時你可以去掉某些你不常用或你不想要的部分；
⑤它有詳細(xì)的代碼和注釋文檔，你可以自己測試，同時也能讓你了解到瀏覽器默認(rèn)是怎么渲染元素的。
IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別，怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box的作用？
- 盒模型，最中心是
內(nèi)容,往外是paddin內(nèi)邊距，再來是border邊框,最后是margin外邊距；IE盒模型和標(biāo)準(zhǔn)盒模型構(gòu)造一樣，區(qū)別在于當(dāng)你指定了一個塊級元素的width值后，在標(biāo)準(zhǔn)盒模型中代表內(nèi)容寬度，而同一個width值在IE盒模型中卻是內(nèi)容寬度+內(nèi)邊距+邊框，引用一張圖作說明：
盒模型 - 可以使用
<!doctype html>聲明來使 IE678使用標(biāo)準(zhǔn)模式的標(biāo)準(zhǔn)盒模型。 -
box-sizing:border-box使用后，為元素指定的寬度和高度將包含其內(nèi)邊距和邊框，后續(xù)如果有設(shè)置內(nèi)邊距和邊框的話就會壓縮內(nèi)容寬度了，想當(dāng)于采用了怪異IE盒模型。
在 ie 6, 7, 8中盒模型的展示
-
IE6的測試如下，沒有doc申明，IE盒子，盒子偏小，不支持inline-block、不支持max-width!
IE6未申明 -
我們把doc申明添加進(jìn)去，并在IE6做測試，盒子變回標(biāo)準(zhǔn)盒模型，但是inline-block和max-width依然沒有效果！
IE6有申明 -
IE8測試如下，沒有doc申明，IE盒子，盒子偏小，未申明doc不支持inline-block、未申明也不支持max-width!
IE8未申明 -
我們把doc申明添加進(jìn)去，并在IE8做測試，盒子變回標(biāo)準(zhǔn)盒模型，也支持inline-block和max-width！
IE8有申明 -
chrome瀏覽器效果如下，標(biāo)準(zhǔn)盒子，支持inline-block、支持max-width！
chrome測試
