1.如何調(diào)試 IE 瀏覽器
答：
- 高版本的IE（7以上）存在開發(fā)者工具，可以直接使用調(diào)試。
- 可以安裝虛擬機(jī)再安裝不同版本的IE去調(diào)試
- 在CSS中使用
border: 1px solid red;和outline:1px solid red;顯示盒模型調(diào)試 - 用IETest調(diào)試，模擬不同版本的IE瀏覽器
2.什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
答：
CSS hack是通過(guò)在CSS樣式中加入一些特殊的符號(hào)，讓不同的瀏覽器識(shí)別不同的符號(hào)（什么樣的瀏覽器識(shí)別什么樣的符號(hào)是有標(biāo)準(zhǔn)的，CSS hack就是讓你記住這個(gè)標(biāo)準(zhǔn)），以達(dá)到應(yīng)用不同的CSS樣式的目的。
- 條件注釋法：在HTML中做更改。
在IE中生效；在IE6生效；
``````在IE7生效； - 屬性前綴法(即類內(nèi)部Hack)： IE6能識(shí)別下劃線""和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)。
IE6:
.box{
_background:yellow;}```
IE7:
.box{
*background:yellow;}```
- 選擇器前綴法(即選擇器Hack)：例如 IE6能識(shí)別html .class{}，IE7能識(shí)別+html .class{}或者*:first-child+html .class{}。
*html .box {
background: yellow;
}```
####3.列舉幾種 瀏覽器兼容問(wèn)題
答：
* ```display:inline-block；``` 對(duì)塊級(jí)元素設(shè)置這個(gè)屬性的時(shí)候，IE67是不支持的，需要如下語(yǔ)句:
*display:inline;
*zoom:1;```
-
opacity:0.8;常用CSS3屬性調(diào)節(jié)透明度，這個(gè)不被IE8以下支持。所以需要：
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60); /* IE 4-7 */
zoom: 1; ```
####4.針對(duì)兼容、多瀏覽器覆蓋有什么看法？**漸進(jìn)增強(qiáng)**和**優(yōu)雅降級(jí)**是什么意思？
答：一般來(lái)講，如果有超過(guò)一定百分比的人數(shù)使用某個(gè)瀏覽器，我們?cè)谠O(shè)計(jì)頁(yè)面時(shí)候就要考慮到此瀏覽器的兼容問(wèn)題。主要就是IE678，火狐和谷歌瀏覽器。先盡量寫代碼，如果月到一些問(wèn)題可以用審查工具去看具體哪有問(wèn)題，配合CANIUSE的網(wǎng)站查詢兼容情況，再酌情進(jìn)行修改。
* 漸進(jìn)增強(qiáng)：是指在渲染的時(shí)候先以低版本的基礎(chǔ)頁(yè)面為主，保證基本功能，之后再針對(duì)高版本瀏覽器中的功能屬性渲染，改進(jìn)等。
* 優(yōu)雅降級(jí)：與上者剛好相反，是指直接渲染網(wǎng)站所有功能，再對(duì)低版本的瀏覽器進(jìn)行兼容。
####5.reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
答：
>在HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式，在切換頁(yè)面的時(shí)候默認(rèn)樣式往往會(huì)給我們帶來(lái)麻煩，影響開發(fā)效率。所以解決的方法就是一開始就將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式?！案采w”瀏覽器的CSS默認(rèn)屬性。最簡(jiǎn)單的說(shuō)法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉,這就是CSS reset。
而相對(duì)于resset.css來(lái)說(shuō)，normalize.css更加柔和保留一些比較通用的瀏覽器默認(rèn)樣式而不是生硬的全部去掉它們，比較講究通用和可維護(hù)性，并且修復(fù)了常見(jiàn)的瀏覽器Bug。所以reset用起來(lái)的時(shí)候影響的范圍很大，后者在Reset 的基礎(chǔ)上給一些有特殊意義的標(biāo)簽加上默認(rèn)樣式，所以較為推薦后者。
>1. Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值
Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺(jué)效果。相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。
2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見(jiàn)的桌面端和移動(dòng)端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關(guān)于這一點(diǎn)，Normalize.css修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問(wèn)題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。
3. Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過(guò)于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會(huì)有這樣的問(wèn)題，因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用時(shí)非常謹(jǐn)慎的，我們僅會(huì)有目的地對(duì)目標(biāo)元素設(shè)置樣式。
4. Normalize.css 是模塊化的
這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）。
5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試。
####6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用？
答：
* IE盒模型寫出來(lái)的寬高是包括內(nèi)容content和margin兩者的。而這里的content也含有border和padding。
* W3C標(biāo)準(zhǔn)盒模型是寫出來(lái)的寬高就是內(nèi)容本身，我們可以在樣式里在對(duì)Margin，padding，border進(jìn)行定義。
在IE678中添加DOCTYPE聲明即可遵循標(biāo)準(zhǔn)盒模型，添加box-sizing:border-box這個(gè)屬性即可以按IE盒模型來(lái)設(shè)定盒子寬高（把邊框和內(nèi)邊距放在同一個(gè)外邊框里）。
####7.在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的區(qū)別?
答：
* 盒模型
<style>
.block{
width:100px;
height:100px;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="block"></div>
</body>```
經(jīng)測(cè)試，IE678在盒模型無(wú)差異均為下圖所示。
IE6，7，8
-
inline-block
在IE67中不支持inline-block，IE8可以。
IE6,7
IE8
- max-width：
<style>
.block1{
max-width:200px;
height:100px;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="block1"></div>
</body>```
***
****本文版權(quán)歸饑人谷_鬼腳七和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源。****