常見的瀏覽器相容性問題總結
1. 不同瀏覽器的標籤預設外補丁margin和內補丁padding不同
發生概率：100%
解決方案：使用CSS萬用字元*，設定內外補丁為0
*{ margin: 0; padding: 0;}
2. 塊屬性標籤float之後，又有橫向的margin值，在IE6中顯示會比設定的大（IE6雙邊距bug）
發生概率：90%
解決方案：在float標籤樣式控制中加入display:inline;
3. 設定較小的高度標籤（一般小於10px），在IE6，IE7，遨遊中超出自己設定的高度
發生概率：60%
解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height小於你設定的高度。
4. 行內標籤設定display:block;後又採用float佈局，再設定橫向margin值時，在IE6中顯示會比設定的大（IE6雙邊距bug）
發生概率：20%
解決方案：在display:block;後面加上display:inline;display:table;
5. 圖片預設有間距
發生概率：20%
解決方案：使用float為img佈局
6. 標籤最低高度設定min-height不相容
發生概率：5%
解決方案：例如要設定一個標籤的最小高度為200px { min-height: 200px; height: auto!important; height: 200px; overflow: visible;}
7. 透明度相容設定
發生概率：主要看你要寫的東西設不設透明度
解決方案：一句話 transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t. filter:alpha(opacity=50); This one you need for IE. -moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator. -khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .
8. Box Model的bug
描述：給一個元素設定了高度和寬度的同時，還為其設定margin和padding的值，會改變該元素的實際大小。
解決辦法：在需要加 margin和padding的div內部加一個div,在這個div裡設定margin和padding值。
9. IE6中的列表li樓梯狀bug
描述：通常在li中的元素（比如a）設定了浮動float，但li本身不浮動。
解決辦法：
ul li{float:left;}
或 ul li{display:inline;}
10.li空白間距
描述：在IE下，會增加li和li之間的垂直間距
解決辦法：給li裡的a顯式的新增寬度或者高度
li a{width:20px;}
或者
li a{display:block;float:left;clear:left;}
或者
li {display:inline;}
li a{display:block;}
或者
在每個列表li上設定一個實線的底邊，顏色和li的背景色相同
11.overflow：auto;和position:relative的碰撞
描述：此bug只出現在IE6和IE7中，有兩個塊級元素，父元素設定了overflow：auto;子元素設定了position:relative;且高度大於父元素，在IE6-7中子元素不會被隱藏而是溢位。
解決方案：給父元素也設定position:relative;
12.浮動層的錯位
描述：當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在Firefox、IE7、IE8及其他標準瀏覽器裡,超出的內容僅僅只是超出邊緣;但在IE6中容器會忽視定義的width值,寬度會錯誤地隨內容寬度增長而增長。如果在這個浮動元素之後還跟著一個浮動元素,那麼就會導致錯位問題。
解決方案：overflow：hidden;
13.IE6克隆文字的bug
描述：若你的程式碼結構如下
<!--這是註釋-->
<div>
……
</div>
<!--這是註釋-->
很有可能在IE6網頁上出現一段空白文字
解決方案：
使用條件註釋
刪除所有註釋
在註釋前面的那個浮動元素加上 display：inline；
14.IE的圖片縮放
描述：圖片在IE下縮放有時會影響其質量
解決方案：img{ -mg-interpolation-mode:bicubic;}
15.IE6下png圖片的透明bug
描述：使用透明圖片,使用png24或png32圖片在IE6下面顯示圖片會有一層淡藍色的背景。
解決方案：
.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}
或
<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />
16.iframe透明背景bug
描述：在IE瀏覽器中，iframe框架不會自動把背景設為透明
解決方案：
<iframesrc="content.html"allowTransparency="true"></iframe>
在iframe呼叫的content.html頁面中設定
body{background-color: transparent;}
17.禁用IE預設的垂直滾動條
解決方案：
html{
overflow:auto;
}
轉載：https://blog.csdn.net/qq_39894133/article/details/79178328