1.如何調(diào)試 IE 瀏覽器？
答：
- 如果是IE7版本以上可以按F12調(diào)出開發(fā)者工具進(jìn)行調(diào)試。
- 如果是IE6可以使用邊框直接進(jìn)行調(diào)試。
- 使用軟件IEterser來進(jìn)行不同的IE版本調(diào)試，然而這個軟件不方便而且收費。
- 安裝多個虛擬機(jī)分別運行IE不同的版本進(jìn)行調(diào)試，推薦使用這個方便，穩(wěn)定，免費。
2.什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
答：
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
- CSS hack一般有3種表現(xiàn)形式CSS內(nèi)部hack、選擇器hack、及HTML頭部引用（if IE）hack。
- CSS內(nèi)部hack:主要針對內(nèi)部hack；比如IE6能識別下劃線“”和“”，IE7能識別“”但不能識別下劃線，而Firefox兩個都不認(rèn)識。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
- 選擇器hack：比如IE6能識別HTML.class{}，IE7能識別+HTML.class{}或者
*.first-child+html.class{}。等等
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
- HTML頭部引用：針對所有IE：<![endif]-->這類hack不僅僅對CSS有效還對判斷句里的所有代碼都生效。
3.列舉幾種 瀏覽器兼容問題
答：
-
<display:inline-block>不兼容IE67所以需要在下添加*display:inline; *zoom:1;來使IE67兼容。 -
<min-height>在IE7以下不兼容，需要給其固定寬度。 -
Box-sizing在IE67不支持。
【CSS】最全的CSS瀏覽器兼容問題
4.針對兼容、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級是什么意思？
答：在考慮兼容的時候首先考慮面向的用戶是什么，如果是政府銀行的項目那就得好好考慮兼容IE67的事情，因為你做出來的東西主要是他們看。如果面對的大部分是年輕用戶那甚至可以不考慮兼容IE67，當(dāng)然還是要聽從領(lǐng)導(dǎo)的建議，但也可以對領(lǐng)導(dǎo)不合理的要求可以提出自己的見解。
在寫代碼的時候也已查一下這個瀏覽器使用的人數(shù)，如果超過了5%那就有必要做下兼容，兼容并不是一定要分毫不差的在每個瀏覽器都很好的實現(xiàn)，對于一些老舊的瀏覽器，只要兼容到不是那么難看的程度就可以了，一些特效比如圓角都可以去掉，為了極少數(shù)的用戶去花費極大的精力去兼容是不可取的。
漸進(jìn)增強(qiáng)：是指先針對能在低版本瀏覽器上進(jìn)行編寫保證最基本的顯示，然后再針對高版本的瀏覽器進(jìn)行優(yōu)化美化。
優(yōu)雅降級：是指現(xiàn)針對高版本的瀏覽器進(jìn)行編寫，然后再對低版本的瀏覽器進(jìn)行優(yōu)化兼容處理。
5.reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
答：
- 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)相符合。
- 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è)置樣式。
4.Normalize.css 是模塊化的這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分（比如表單的一般化）。
5.Normalize.css 擁有詳細(xì)的文檔Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測試。
這個項目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。
- reset.css是通過重新定義標(biāo)簽樣式，把瀏覽器的默認(rèn)樣式覆蓋掉，以便保持個瀏覽器渲染的一致性,相對暴力。
- normalize.css是reset.css的替代方案，保留有用的瀏覽器默認(rèn)樣式，重置掉該重置的樣式，同時進(jìn)行一些bug的修復(fù)，相對平和。
有些時候重新定義一些標(biāo)簽樣式是沒必要需要的時候還得大費周折的給他加回去，所以推薦使用normalize.css。
6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用？
答：IE盒模型的寬度是：
寬度（width）=邊框（border）+內(nèi)邊距（padding）+內(nèi)容寬度（content）
標(biāo)準(zhǔn)盒模型的寬度是：實際內(nèi)容的寬度。
IE678下使用標(biāo)準(zhǔn)盒模型在文檔聲明里寫上<doctype>即可。
這是一個CSS3屬性<box-sizing:border-box>的作用是固定盒模型的寬度，使得padding無法將盒模型撐開，也是就使用IE盒模型。
操作：安裝XP虛擬機(jī)。
裝了3個虛擬機(jī)分別安裝IE678三個瀏覽器
測試代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)13</title>
<style>
.box {
border: 20px solid #000;
padding: 20px;
margin: 20px;
width: 200px;
height: 200px;
background: red;
}
.box2{
display: inline-block;
}
p{
max-width:300px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2">hollo</div>
<div class="box2">world</div>
<p>這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本</p>
</body>
</html>
ie6結(jié)果如下
可以看出IE6部分支持
Inline-block不支持max-width 但是可以使用標(biāo)準(zhǔn)模式進(jìn)行渲染。IE7結(jié)果如下
可以看出IE7支持
max-width但部分支持inline-block，也支持標(biāo)準(zhǔn)模式渲染，但是通過查資料發(fā)現(xiàn)inline-block在IE67支持行內(nèi)元素IE8結(jié)果如下
可以看出IE8全部都支持
本教程版權(quán)歸本人和饑人谷所有
