1.如何調(diào)試 IE 瀏覽器
<li> IE7以上（包括Edge)自帶開(kāi)發(fā)者工具嫡丙。
Edge：
<li>安裝虛擬機(jī)雌芽，安裝各種不同版本的IE來(lái)調(diào)試瓶堕。
<li>使用IEtest來(lái)模擬運(yùn)行不同的IE版本。
2.什么是CSS hack们妥？在 CSS 和 HTML里如何寫(xiě) hack猜扮？在 CSS 中 ie6、ie7的 hack 方式王悍？
hack指的是利用瀏覽器的一個(gè)bug來(lái)解決另一個(gè)bug破镰，CSS hack是通過(guò)在CSS樣式中加入一些特殊的符號(hào)，讓不同的瀏覽器識(shí)別不同的符號(hào)（什么樣的瀏覽器識(shí)別什么樣的符號(hào)是有標(biāo)準(zhǔn)的压储，CSS hack就是讓你記住這個(gè)標(biāo)準(zhǔn)）鲜漩，例如加上 " * " 和" _ " 只有ie6可以識(shí)別，其他瀏覽器默認(rèn)不會(huì)識(shí)別這段代碼集惋，就做到了只對(duì)ie6單獨(dú)設(shè)置的效果孕似。
通過(guò)瀏覽器識(shí)別字符標(biāo)準(zhǔn)對(duì)應(yīng)表可以得知：
<li>大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox刮刑，chrome喉祭，opera，safari不支持 (opera可識(shí)別除外)雷绢。
<li>\9 ：所有IE瀏覽器都支持
<li>_和- ：僅IE6支持
<li>* ：IE6泛烙、E7支持
<li>\0 ：IE8、IE9支持翘紊，opera部分支持
<li>\9\0 ：IE8部分支持蔽氨、IE9支持
<li>\0\9 ：IE8、IE9支持
根據(jù)此對(duì)應(yīng)表帆疟，可以得知：
1.區(qū)別IE和非IE瀏覽器
<li>#tip{ background:blue;非IE背景藍(lán)色 因?yàn)樗袨g覽器都能解釋
<li>background:red\9;IE6鹉究、IE7、IE8踪宠、IE9背景紅色
2.區(qū)別IE6,IE7,IE8,FF
<li>#tip{ background:blue;Firefox}背景變藍(lán)色 所有瀏覽器都支持
<li>background:red\9;IE8背景變紅色 IE6自赔、7、8柳琢、9支持覆蓋上面樣式
<li> *background:black;/E7背景變黑色 IE6绍妨、7支持又一次覆蓋上面樣式
<li> _background:orange;IE6背景變橘色，僅IE6支持又一次覆蓋上面樣式
【說(shuō)明】："*"因?yàn)镮E系列瀏覽器可讀「\9」染厅，而IE6和IE7可讀「*」(米字號(hào))痘绎，另外IE6可辨識(shí)「_」(底線)，因此可以依照順序?qū)懴聛?lái)肖粮，就會(huì)讓瀏覽器正確的讀取到自己看得懂得CSS語(yǔ)法，所以就可以有效區(qū)分IE各版本和非IE瀏覽器(像是Firefox尔苦、Opera涩馆、GoogleChrome行施、Safari等)。
3.區(qū)別IE6魂那、IE7蛾号、Firefox
<li>#tip{ background:blue;Firefox背景變藍(lán)色
<li>*background:black;IE7背景變黑色
<li> _background:orange;IE6背景變橘色
【說(shuō)明】：IE7和IE6可讀「*」(米字號(hào))，IE6又可以讀「_」(底線)涯雅，但是IE7卻無(wú)法讀取「_」鲜结，至于Firefox(非IE瀏覽器)則完全無(wú)法辨識(shí)「*」和「_」，因此就可以透過(guò)這樣的差異性來(lái)區(qū)分IE6活逆、IE7精刷、Firefox
hack只是解決兼容問(wèn)題的一種手段，在實(shí)際項(xiàng)目過(guò)程中蔗候，應(yīng)盡量減少hack的使用怒允，根據(jù)不同的項(xiàng)目要求，在編碼過(guò)程中最好就可以提前考慮到兼容問(wèn)題锈遥。
3.列舉幾種 瀏覽器兼容問(wèn)題
1.IE6纫事、IE7不識(shí)別inline-block但可以觸發(fā)塊元素。其它主流瀏覽器均支持inline-block所灸。
<li>解決IE6丽惶、IE7兼容性的方法：
1.首先設(shè)置inline-block觸發(fā)塊元素，具有了layout的特性爬立，然后設(shè)置display:inline使塊元素呈現(xiàn)內(nèi)聯(lián)元素钾唬，此時(shí)layout的特性不會(huì)消失。
2.直接設(shè)置display:inline懦尝，使用zoom:1觸發(fā)layout知纷。
兼容所有瀏覽器的方法是：
*display:inline;
*zoom:1;
}```
2.min-height在IE7以下不支持，一般采用把高度寫(xiě)死來(lái)解決這個(gè)問(wèn)題陵霉。
3.opacity是用來(lái)設(shè)定元素透明度的琅轧， 是CSS 3里的一個(gè)屬性，IE8以下不支持踊挠，包括一些老版本的瀏覽器也不支持乍桂。
.opacity{
filter:alpha(opacity=50); /* IE /
-moz-opacity:0.5; / 老版Mozilla /
-khtml-opacity:0.5; / 老版Safari /
opacity: 0.5; / 支持opacity的瀏覽器*/
}```
4.針對(duì)兼容、多瀏覽器覆蓋有什么看法效床？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思睹酌？
具體做不做兼容， 兼容到什么程度剩檀，不能一概而論憋沿，應(yīng)該根據(jù)不同項(xiàng)目來(lái)具體調(diào)整，主要是項(xiàng)目面向的用戶使用各瀏覽器所占的百分比沪猴，一般來(lái)說(shuō)辐啄，某個(gè)瀏覽器的用戶使用量超過(guò) 5% 的時(shí)候采章，就應(yīng)該對(duì)該瀏覽器進(jìn)行兼容處理了，反之壶辜，為了個(gè)別用戶量極小的瀏覽器而特地花費(fèi)了大量的時(shí)間與精力來(lái)做兼容悯舟，是不可取的；甚至某些通過(guò)hack解決的兼容問(wèn)題會(huì)帶來(lái)其他一些難以預(yù)料到的問(wèn)題砸民，得不償失抵怎。一般來(lái)說(shuō)，兼容程度大致分為三個(gè)級(jí)別：
A： 好看又好用岭参。
B：好用但不好看反惕，好用但有些外觀無(wú)法識(shí)別。
C：不好看冗荸，但功能可以勉強(qiáng)使用承璃。
我們應(yīng)對(duì)于不同的項(xiàng)目要求和不同的瀏覽器版本靈活選擇這三種兼容程度。
漸進(jìn)增強(qiáng)指的是先在較低版本的蚌本、兼容性較差的瀏覽器上進(jìn)行編碼盔粹，以保證正常使用，然后再對(duì)其他高版本程癌、兼容性強(qiáng)的瀏覽器做出一些功能較為強(qiáng)大的編碼舷嗡。
優(yōu)雅降級(jí)與漸進(jìn)增強(qiáng)相反，先在高版本嵌莉、兼容性強(qiáng)的瀏覽器實(shí)現(xiàn)功能进萄，然后根據(jù)要求對(duì)低版本瀏覽器進(jìn)行兼容處理。
【區(qū)別】：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始锐峭，并試圖減少用戶體驗(yàn)的供給中鼠，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的沿癞，能夠起作用的版本開(kāi)始援雇，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要椎扬。降級(jí)（功能衰減）意味著往回看惫搏；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶蚕涤。
5.reset.css和normalize.css分別是做什么的筐赔？為什么推薦使用nomalize.css?
<li>reset.css是通過(guò)重新定義標(biāo)簽樣式，把瀏覽器的默認(rèn)樣式覆蓋掉揖铜，以便保持個(gè)瀏覽器渲染的一致性茴丰，相對(duì)暴力；但是reset仍有自己的優(yōu)點(diǎn)和應(yīng)用場(chǎng)景：
1.商業(yè)產(chǎn)品，建議使用CSS reset较沪。原因就是瀏覽器版本迭代越來(lái)越快鳞绕，對(duì)設(shè)計(jì)的還原要求較高的產(chǎn)品失仁，如果瀏覽器版本升級(jí)而影響WEB界面發(fā)生細(xì)微變化尸曼，這是無(wú)法接受的。
2.多人協(xié)作項(xiàng)目萄焦，建議使用CSS reset控轿，為了省事，高效拂封，規(guī)范團(tuán)隊(duì)茬射。
3.個(gè)人項(xiàng)目，比如博客冒签、文檔在抛，完全不需要CSS reset。
<li>Normalize 相對(duì)「平和」萧恕，注重通用的方案刚梭，重置掉該重置的樣式，保留有用的 user agent 樣式票唆，同時(shí)進(jìn)行一些 bug 的修復(fù)朴读。Normalize 實(shí)際上就是一段CSS代碼，通過(guò)在HTML開(kāi)頭的引用來(lái)達(dá)到類似與reset的目的走趋。
創(chuàng)造normalize.css有下面這幾個(gè)目的：
1.保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
2.一般化的樣式：為大部分HTML元素提供
3.修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
4.優(yōu)化CSS可用性：用一些小技巧
5.解釋代碼：用注釋和詳細(xì)的文檔
Normailze.css的優(yōu)點(diǎn)：
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。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è)置樣式仔燕。Normalize.css 是模塊化的
這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分造垛，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）晰搀。Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試五辽。這個(gè)文件中擁有詳細(xì)的代碼說(shuō)明并在Github Wiki中有進(jìn)一步的說(shuō)明。這意味著你可以找到每一行代碼具體完成了什么工作外恕、為什么要寫(xiě)這句代碼杆逗、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測(cè)試鳞疲。
這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的罪郊，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。
如何使用 normalize.css
首先尚洽，安裝或從Github下載Normalize.css悔橄，接下來(lái)有兩種主要途徑去使用它。
策略一：將normalize.css
作為你自己項(xiàng)目的基礎(chǔ)CSS腺毫，自定義樣式值以滿足設(shè)計(jì)師的需求癣疟。
策略二：引入normalize.css
源碼并在此基礎(chǔ)上構(gòu)建，在必要的時(shí)候用你自己寫(xiě)的CSS覆蓋默認(rèn)值拴曲。
<li>引用：來(lái)争舞，讓我們談一談 Normalize.css
6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
盒模型一共有兩種模式，一種是標(biāo)準(zhǔn)模式澈灼，另一種就是怪異模式竞川。無(wú)論使用哪種模式完整定義DOCTYPE，都會(huì)觸發(fā)標(biāo)準(zhǔn)模式叁熔，而如果DOCTYPE缺失則在ie6委乌，ie7，ie8下將會(huì)觸發(fā)怪異模式（quirks 模式）荣回。對(duì)于盒模型的詳細(xì)解答在前面的文章盒模型基礎(chǔ)中遭贸。
box-sizing:border-box其實(shí)就是在聲明doctype的情況下對(duì)盒模型使用怪異模式。
使用場(chǎng)景：
一般來(lái)說(shuō)心软，百分比為寬度的容器設(shè)置padding時(shí),容器的寬度就會(huì)像外擴(kuò)展相應(yīng)的padding值,要使寬度不被撐開(kāi),那么就是用box-sizing:border-box;會(huì)控制這種情況壕吹。在這種情況下，使用box-sizing:border-box;比較好删铃。
推薦寫(xiě)法：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}```
【說(shuō)明】：選擇器 * 無(wú)法覆蓋到偽元素耳贬，所以需要給 :before 和 :after 分別設(shè)置。而通過(guò)繼承的方式應(yīng)用到所有元素猎唁，需要時(shí)可以方便的設(shè)置某個(gè)元素及其后代元素的 box-sizing 回 content-box咒劲。
***
##7.在 ie 6, 7, 8中展示 **盒模型**、**inline-block**、**max-width**的區(qū)別
**由于win10無(wú)法使用ietester腐魂，所以在XP虛擬機(jī)中運(yùn)行ieteser：**
<li>盒模型代碼：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>box</title>
<style>
.box {
border: 20px solid #000;
padding: 20px;
margin: 20px;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>```
1.不加<!doctype html>帐偎，在怪異模式下運(yùn)行代碼：
2.加<削樊！doctype html>，在標(biāo)準(zhǔn)模式下運(yùn)行：
<li>inline-block 代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block</title>
<style>
.content {
display: inline-block;
}
</style>
</head>
<body>
<div class="content">你好</div>
<div class="content">世界</div>
</body>
</html>```
IE 6、7 中運(yùn)行：
IE 8中運(yùn)行：
<li>max-width 代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
max-width: 300px;
}
</style>
</head>
<body>
<p>這是一些文本眼刃。這是一些文本。這是一些文本摇肌。這是一些文本擂红。這是一些文本。這是一些文本围小。這是一些文本昵骤。這是一些文本。這是一些文本肯适。這是一些文本变秦。這是一些文本。這是一些文本框舔。這是一些文本蹦玫。這是一些文本。這是一些文本刘绣。</p>
</body>
</html>```
IE 6中運(yùn)行：
IE 7樱溉、8中運(yùn)行：
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源纬凤。
