1.圖片間隙

　　A)div中的圖片間隙（該bug出現(xiàn)在IE6以及更低版本當(dāng)中）

　　描述：在div中插入圖片時(shí)，圖片會(huì)將div下方撐大三像素

　　hack1：將</div>和<img>寫在一行上

　　hack2：將<img>轉(zhuǎn)化為塊狀元素，給<img>添加聲明：display:block;

　　B)dt,li中的圖片間隙(IE6)

　　hack1:將<img>轉(zhuǎn)化為塊狀元素，給<img>添加聲明:display:block;

　　hack2:<img>設(shè)置對(duì)齊方式為vertical-align:top

2.雙倍浮向（雙倍邊距）

　　描述:當(dāng)ie6及更低版本解決浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤的把浮向邊邊界加倍顯示

　　hack：給浮動(dòng)元素添加聲明： display:inline

3.默認(rèn)高度（IE6）

　　描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度（低于16px高度）

　　hack1：給元素添加聲明：font-size:0

　　hack2:給元素添加聲明:overflow:hidden;

?

4.表單元素行高不一致

　　描述：表單元素行高對(duì)齊方式不一致

　　hack：給表單元素添加聲明：float：left或vertical-align:top

5.百分比bug

　　描述：在IE6及以下版本中在解析百分比時(shí)，會(huì)按照四舍五入的方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況

　　hack：給右邊的元浮動(dòng)元素添加1聲明：clear：right；意思：清除右浮動(dòng)，clear：left；clear：both

6.透明寫法

　　opacity：0~1； IE8及以上瀏覽器

　　fliter:alpha(opacity=1~100);IE9及IE9以下的瀏覽器

7.列表階梯bug（IE6及更低版本的瀏覽器當(dāng)中）

　　bug1:在給的子元素中使用了Float：left；父元素沒(méi)有設(shè)置浮動(dòng)屬性，li階梯效果

　　hack：給父元素設(shè)置浮動(dòng)

　　bug2：當(dāng)給LI里的A轉(zhuǎn)成塊元素，并設(shè)置了固定高度，且給父元素寫了浮動(dòng)后在IE6及更低版本中會(huì)出現(xiàn)垂直顯示

·　? hack：給a也設(shè)置浮動(dòng)便可解決

8.鼠標(biāo)指針bug

　　描述：cursor屬性的head屬性值只有IE瀏覽器能識(shí)別，其他瀏覽器不識(shí)別該聲明，cursor屬性的pointor屬性值IE6.0以上版本及其他內(nèi)核

　　　　　　瀏覽器都識(shí)別該聲明

　　hack：如同意某元素指針鼠標(biāo)形狀為手型，添加聲明：cursor：pointer

9.瀏覽器解析邊框按鈕時(shí)，會(huì)把邊框解析在按鈕內(nèi)部，不會(huì)影響按鈕的原有大小

10.Normalize.css

　　不同瀏覽器的默認(rèn)樣式存在差距，可以使用Normalize.css抹平這些差異，當(dāng)然你也肯定定制屬于自己業(yè)務(wù)的reset.css

　　<link href ="https://cdn.bootcss.com/noemalize/7.0.0/normalize.min.css" rel="stylesheet">

　　簡(jiǎn)單粗暴法:*{margin:0;padding:0}

11.html5shiv.js

　　解決ie9及以下瀏覽器對(duì)html5新增標(biāo)簽不能識(shí)別的問(wèn)題

12.瀏覽器兼容前綴

　　Opera:-o-

　　IE:-ms

　　Firedox:-moz-

　　Chrome:-webkit-

13.a標(biāo)簽的幾種CSS狀態(tài)的順序

　　有時(shí)候我們寫好a標(biāo)簽會(huì)發(fā)現(xiàn)寫的樣式無(wú)效，或者點(diǎn)擊超鏈接后，hover，active樣式?jīng)]有效果，其實(shí)知識(shí)寫的樣式被覆蓋了

　　正確的a標(biāo)簽順序應(yīng)該是 ：==love? hate ? ==? 愛(ài)恨

　　即.link　.visited ?? .hover ? ?? .active

14.BFC解決邊距重疊問(wèn)題

　　.當(dāng)相鄰元素設(shè)置了margin邊距時(shí)。margin將會(huì)取最大值，舍棄小值，為了不讓邊距重疊，可以給子元素加一個(gè)父元素，并設(shè)置該父元素為BFC：overflow：hidden（注意：BFC為塊狀格式化上下文）

15.IE6雙倍邊距問(wèn)題

　　ie6中設(shè)置浮動(dòng)，同時(shí)有設(shè)置margin，會(huì)出現(xiàn)雙倍邊距的問(wèn)題

　　hack：display：inline

16.解決IE6不支持fixed絕對(duì)定位以及IE6以下被絕對(duì)定位的元素在滾動(dòng)時(shí)會(huì)閃動(dòng)的問(wèn)題

　　hack：html,html body{

　　　　background-images:url(about:blank);

　　　　background-attachment:fixed;}

　　　　html #menu{

　　　　position:absolute;

　　　　top:expression((e=document.doucumentElement.scrollTop)?e.document.body.scrollTop) 100 'px')}

17.解決IE6不支持min-height兼容性寫法

　　min-height:350px;

　　_height:350px;

?

今天早上突發(fā)奇想看了看瀏覽器的兼容問(wèn)題，發(fā)現(xiàn)我竟然全忘光了，血慘，趕緊整篇博客記一下子，感覺(jué)提前步入老年癡呆生活了

　　　　

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的浏览器兼容问题及解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。