1.圖片間隙

　　A)div中的圖片間隙（該bug出現在IE6以及更低版本當中）

　　描述：在div中插入圖片時，圖片會將div下方撐大三像素

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

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

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

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

　　hack2:<img>設置對齊方式為vertical-align:top

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

　　描述:當ie6及更低版本解決浮動元素時，會錯誤的把浮向邊邊界加倍顯示

　　hack：給浮動元素添加聲明： display:inline

3.默認高度（IE6）

　　描述：在IE6及以下版本中，部分塊元素擁有默認高度（低于16px高度）

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

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

?

4.表單元素行高不一致

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

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

5.百分比bug

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

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

6.透明寫法

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

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

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

　　bug1:在給的子元素中使用了Float：left；父元素沒有設置浮動屬性，li階梯效果

　　hack：給父元素設置浮動

　　bug2：當給LI里的A轉成塊元素，并設置了固定高度，且給父元素寫了浮動后在IE6及更低版本中會出現垂直顯示

·　? hack：給a也設置浮動便可解決

8.鼠標指針bug

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

　　　　　　瀏覽器都識別該聲明

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

9.瀏覽器解析邊框按鈕時，會把邊框解析在按鈕內部，不會影響按鈕的原有大小

10.Normalize.css

　　不同瀏覽器的默認樣式存在差距，可以使用Normalize.css抹平這些差異，當然你也肯定定制屬于自己業務的reset.css

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

　　簡單粗暴法:*{margin:0;padding:0}

11.html5shiv.js

　　解決ie9及以下瀏覽器對html5新增標簽不能識別的問題

12.瀏覽器兼容前綴

　　Opera:-o-

　　IE:-ms

　　Firedox:-moz-

　　Chrome:-webkit-

13.a標簽的幾種CSS狀態的順序

　　有時候我們寫好a標簽會發現寫的樣式無效，或者點擊超鏈接后，hover，active樣式沒有效果，其實知識寫的樣式被覆蓋了

　　正確的a標簽順序應該是 ：==love? hate ? ==? 愛恨

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

14.BFC解決邊距重疊問題

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

15.IE6雙倍邊距問題

　　ie6中設置浮動，同時有設置margin，會出現雙倍邊距的問題

　　hack：display：inline

16.解決IE6不支持fixed絕對定位以及IE6以下被絕對定位的元素在滾動時會閃動的問題

　　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;

?

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

　　　　

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。