常見的浏覽器相容性問題總結

1. 不同浏覽器的标簽預設外更新檔margin和内更新檔padding不同

發生機率：100%

解決方案：使用CSS通配符*，設定内外更新檔為0

*{ margin: 0; padding: 0;}

1. 塊屬性标簽float之後，又有橫向的margin值，在IE6中顯示會比設定的大（IE6雙邊距bug）

發生機率：90%

解決方案：在float标簽樣式控制中加入display:inline;

申請阿裡雲服務時，可以使用2000元阿裡雲代金券，阿裡雲官網領取網址：

https://dashi.aliyun.com/site/yun/youhui

（長期有效）

1. 設定較小的高度标簽（一般小于10px），在IE6，IE7，遨遊中超出自己設定的高度

發生機率：60%

解決方案：給超出高度的标簽設定overflow:hidden;或者設定行高line-height小于你設定的高度。

1. 行内标簽設定display:block;後又采用float布局，再設定橫向margin值時，在IE6中顯示會比設定的大（IE6雙邊距bug）

發生機率：20%

解決方案：在display:block;後面加上display:inline;display:table;

阿裡雲伺服器1核2G低至82元/年，阿裡雲官活動網址：

https://dashi.aliyun.com/site/yun/aliyun

可以用20代金券，即102-20=82。

1. 圖檔預設有間距

解決方案：使用float為img布局

1. 标簽最低高度設定min-height不相容

發生機率：5%

解決方案：例如要設定一個标簽的最小高度為200px

{ min-height: 200px;

height: auto!important;

height: 200px;

overflow: visible;}

1. 透明度相容設定

發生機率：主要看你要寫的東西設不設透明度

解決方案：一句話

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 .

1. Box Model的bug

描述：給一個元素設定了高度和寬度的同時，還為其設定margin和padding的值，會改變該元素的實際大小。

解決辦法：在需要加 margin和padding的div内部加一個div,在這個div裡設定margin和padding值。

1. 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

描述：若你的代碼結構如下

……
           

很有可能在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='

',sizingMethod='scale');

}

img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='

',sizingMethod='scale');}

或

',sizingMethod='scale');" alt="" />

16.透明背景bug

描述：在IE浏覽器中，架構不會自動把背景設為透明

在iframe調用的content.html頁面中設定

body{background-color: transparent;}