前端離不開“瀏覽器”笼裳，要學(xué)好前端铅檩，我們就要學(xué)會(huì)調(diào)試IE瀏覽器憎夷，并且處理好瀏覽器兼容等有關(guān)瀏覽器的問題。
一昧旨、如何調(diào)試 IE 瀏覽器拾给？
- IE瀏覽器7以上+自帶的開發(fā)工具，ie6可以用加border的方法;
- 采用模擬器的方式去模擬不同版本下的IE瀏覽器兔沃，如ietester;
- 通過安裝虛擬機(jī)的方式蒋得，安裝不同版本的IE運(yùn)行環(huán)境去達(dá)到調(diào)試IE瀏覽器的目的。
二乒疏、什么是CSS hack额衙？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6怕吴、ie7的 hack 方式窍侧？
CSS Hack:不同的瀏覽器對(duì)CSS的解析結(jié)果是不同的，因此會(huì)導(dǎo)致相同的CSS輸出的頁面效果不同转绷，這就需要CSS Hack來解決瀏覽器局部的的兼容問題伟件。而這個(gè)針對(duì)不同的瀏覽器寫不同的CSS代碼的過程。
在CSS和HTML中如何寫hack:
CSS Hack大致有3種表現(xiàn)形式：CSS屬性前綴法议经、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack斧账。
- 屬性前綴法（即類內(nèi)部Hack）
<pre>
Html:
<div class="container">
</div>
CSS:
.container{
color:red;
_color:red;/IE6識(shí)別/
color:red;/IE6,IE7識(shí)別/
color:red\9;/IE6-IE10識(shí)別*/
}
</pre> - 選擇器前綴法：
<pre>
body{
}/只對(duì)IE6有效/
+body{
}/只對(duì)IE7生效/
@media screen\9{...}/只對(duì)IE6/7生效/
</pre> - IE條件注釋法：
只在IE下生效
<pre>
</pre>
只在IE6下生效
<pre>
</pre>
只在IE6以上版本生效
<pre>
</pre>
只在IE8上不生效
<pre>
</pre>
非IE瀏覽器生效
<pre>
</pre>
在CSS中ie6、ie7的hack方式：
IE6
選擇器前綴法：
<pre>
body{
}/只對(duì)IE6生效/
</pre>
IE條件注釋法：
<pre>
</pre>
IE7
選擇器前綴法：
<pre>
+body{
}/只對(duì)IE7生效/
</pre>
IE條件注釋法：
<pre>
</pre>
三煞肾、列舉幾種 瀏覽器兼容問題
- 不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)哆种（margin和padding）不同；
- 塊屬性標(biāo)簽float后籍救，又有橫行的margin情況下习绢，在IE6顯示margin比設(shè)置的大；
- 行內(nèi)屬性標(biāo)簽钧忽，設(shè)置display:block后采用float布局毯炮，又有橫行的margin的情況逼肯，IE間距bug;
- 標(biāo)簽最低高度設(shè)置min-height不兼容；
- 透明度的兼容CSS設(shè)置
四桃煎、針對(duì)兼容篮幢、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思为迈？
對(duì)于兼容三椿，有的放矢，分清主次葫辐，針對(duì)主流瀏覽器開發(fā)搜锰，同時(shí)兼顧用戶需求，遇到一個(gè)問題解決一個(gè)耿战，先完成基本功能和樣式的實(shí)現(xiàn)蛋叼，再根據(jù)需要和其他瀏覽器的用戶份額來考慮是否完善兼容性。
漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面剂陡，保證最基本的功能狈涮，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能鸭栖，達(dá)到更好的用戶體驗(yàn)歌馍。
優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容晕鹊。
五松却、reset.css和normalize.css分別是做什么的？為什么推薦使用 normalize.css?
reset.css的目的是將所有瀏覽器的自帶樣式重置掉溅话，這樣更易于保持各瀏覽器渲染的一致性晓锻。
normalize.css則盡量保留瀏覽器的默認(rèn)樣式，該項(xiàng)目依賴于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異公荧，精確定位需要重置的樣式带射。
normalize.css的優(yōu)勢：
1.normalize.css保護(hù)了有價(jià)值的默認(rèn)值同规，reset.css通過為幾乎所有的元素添加默認(rèn)樣式循狰，強(qiáng)行使得元素有相同的視覺效果，相比之下券勺，Normalize.css保持了許多默認(rèn)瀏覽器樣式绪钥；這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。
2.Normalize.css修復(fù)了瀏覽器的bug关炼，它修復(fù)了常見的桌面端和移動(dòng)端移動(dòng)瀏覽器的bug程腹，這往往超過了reset.css所能做到的范疇。
六儒拂、IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用寸潦？
IE盒模型下盒子的寬度=邊框+padding+內(nèi)容寬度（IE6,7,8怪異模式）
標(biāo)準(zhǔn)盒模型下盒子的寬度=內(nèi)容寬度
通過添加doctype聲明使IE678使用標(biāo)準(zhǔn)盒模型色鸳。
box-size:border-box;是CSS3新增屬性，設(shè)置此屬性之后见转，相當(dāng)于以怪異模式解析命雀。通常一個(gè)塊級(jí)元素實(shí)際所占寬高度=外邊距（margin）+ 邊界寬度(border-width) + 內(nèi)邊距（padding）+ 高度（height） / 寬度（width）
如果設(shè)置了border-box，實(shí)際所占寬高度 = 設(shè)置的高度（height）/ 設(shè)置的寬度（width）+ 外邊距（margin）
示例：
參考：
1.CSS hack方式
2. 史上最全的CSS hack方式一覽
3.div+CSS瀏覽器兼容問題整理
4.Normalize.css和Reset CSS的區(qū)別
5.normalize.css與reset.css區(qū)別
6.關(guān)于css樣式的重置：Reset.css和Normalize.css
版權(quán)歸本人所有斩箫，若有轉(zhuǎn)載吏砂，請(qǐng)注明來源。
