1.如何調(diào)試 IE 瀏覽器？
答：
- 如果是IE7版本以上可以按F12調(diào)出開(kāi)發(fā)者工具進(jìn)行調(diào)試。
- 如果是IE6可以使用邊框直接進(jìn)行調(diào)試喷斋。
- 使用軟件IEterser來(lái)進(jìn)行不同的IE版本調(diào)試，然而這個(gè)軟件不方便而且收費(fèi)。
- 安裝多個(gè)虛擬機(jī)分別運(yùn)行IE不同的版本進(jìn)行調(diào)試损姜，推薦使用這個(gè)方便，穩(wěn)定殊霞，免費(fèi)摧阅。
2.什么是CSS hack？在 CSS 和 HTML里如何寫 hack绷蹲？在 CSS 中 ie6棒卷、ie7的 hack 方式？
答：
CSS hack由于不同廠商的瀏覽器祝钢，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等比规，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7拦英，對(duì)CSS的解析認(rèn)識(shí)不完全一樣蜒什，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果疤估。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS灾常，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果铃拇。
簡(jiǎn)單的說(shuō)钞瀑，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然慷荔，我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果仔戈。
- CSS hack一般有3種表現(xiàn)形式CSS內(nèi)部hack、選擇器hack拧廊、及HTML頭部引用（if IE）hack监徘。
- CSS內(nèi)部hack:主要針對(duì)內(nèi)部hack；比如IE6能識(shí)別下劃線“”和“”吧碾，IE7能識(shí)別“”但不能識(shí)別下劃線凰盔，而Firefox兩個(gè)都不認(rèn)識(shí)。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
- 選擇器hack：比如IE6能識(shí)別HTML.class{}倦春，IE7能識(shí)別+HTML.class{}或者
*.first-child+html.class{}户敬。等等
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
- HTML頭部引用：針對(duì)所有IE：<![endif]-->這類hack不僅僅對(duì)CSS有效還對(duì)判斷句里的所有代碼都生效落剪。
3.列舉幾種 瀏覽器兼容問(wèn)題
答：
-
<display:inline-block>不兼容IE67所以需要在下添加*display:inline; *zoom:1;來(lái)使IE67兼容。 -
<min-height>在IE7以下不兼容尿庐，需要給其固定寬度忠怖。 -
Box-sizing在IE67不支持。
【CSS】最全的CSS瀏覽器兼容問(wèn)題
4.針對(duì)兼容抄瑟、多瀏覽器覆蓋有什么看法凡泣？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思？
答：在考慮兼容的時(shí)候首先考慮面向的用戶是什么皮假，如果是政府銀行的項(xiàng)目那就得好好考慮兼容IE67的事情鞋拟，因?yàn)槟阕龀鰜?lái)的東西主要是他們看。如果面對(duì)的大部分是年輕用戶那甚至可以不考慮兼容IE67惹资，當(dāng)然還是要聽(tīng)從領(lǐng)導(dǎo)的建議贺纲，但也可以對(duì)領(lǐng)導(dǎo)不合理的要求可以提出自己的見(jiàn)解。
在寫代碼的時(shí)候也已查一下這個(gè)瀏覽器使用的人數(shù)褪测，如果超過(guò)了5%那就有必要做下兼容猴誊，兼容并不是一定要分毫不差的在每個(gè)瀏覽器都很好的實(shí)現(xiàn)，對(duì)于一些老舊的瀏覽器侮措，只要兼容到不是那么難看的程度就可以了稠肘，一些特效比如圓角都可以去掉，為了極少數(shù)的用戶去花費(fèi)極大的精力去兼容是不可取的萝毛。
漸進(jìn)增強(qiáng)：是指先針對(duì)能在低版本瀏覽器上進(jìn)行編寫保證最基本的顯示项阴，然后再針對(duì)高版本的瀏覽器進(jìn)行優(yōu)化美化。
優(yōu)雅降級(jí)：是指現(xiàn)針對(duì)高版本的瀏覽器進(jìn)行編寫笆包，然后再對(duì)低版本的瀏覽器進(jìn)行優(yōu)化兼容處理环揽。
5.reset.css和normalize.css分別是做什么的？為什么推薦使用 nomalize.css?
答：
- 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)相符合肛根。
- 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è)試洁仗。這個(gè)文件中擁有詳細(xì)的代碼說(shuō)明并在Github Wiki中有進(jìn)一步的說(shuō)明层皱。這意味著你可以找到每一行代碼具體完成了什么工作性锭、為什么要寫這句代碼赠潦、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測(cè)試草冈。
這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的她奥，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。
- reset.css是通過(guò)重新定義標(biāo)簽樣式怎棱，把瀏覽器的默認(rèn)樣式覆蓋掉哩俭，以便保持個(gè)瀏覽器渲染的一致性,相對(duì)暴力。
- normalize.css是reset.css的替代方案拳恋，保留有用的瀏覽器默認(rèn)樣式凡资，重置掉該重置的樣式，同時(shí)進(jìn)行一些bug的修復(fù)谬运，相對(duì)平和隙赁。
有些時(shí)候重新定義一些標(biāo)簽樣式是沒(méi)必要需要的時(shí)候還得大費(fèi)周折的給他加回去，所以推薦使用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)盒模型的寬度是：實(shí)際內(nèi)容的寬度。
IE678下使用標(biāo)準(zhǔn)盒模型在文檔聲明里寫上<doctype>即可轰驳。
這是一個(gè)CSS3屬性<box-sizing:border-box>的作用是固定盒模型的寬度厚掷，使得padding無(wú)法將盒模型撐開(kāi)，也是就使用IE盒模型级解。
操作：安裝XP虛擬機(jī)冒黑。
裝了3個(gè)虛擬機(jī)分別安裝IE678三個(gè)瀏覽器
測(cè)試代碼
<!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)模式渲染，但是通過(guò)查資料發(fā)現(xiàn)inline-block在IE67支持行內(nèi)元素IE8結(jié)果如下
可以看出IE8全部都支持
本教程版權(quán)歸本人和饑人谷所有
