瀏覽器兼容性

1、瀏覽器兼容性簡介

同一個網頁，在不一樣的瀏覽器下，顯示的效果可能不一樣，也就是所謂的「兼容性」。

兼容性調試，主要調試IE八、IE七、IE六、Firefox。

能夠參考這個：瀏覽器市場份額調查。

 

2、兼容性詳解

主要是如下三個方面：

全局CSS設置

經常使用的兼容性調試技巧

CSS HACK

 

3、全局CSS設置

1. 清除全部標記的內外邊距

body,ul,li,a,img,p,input{ margin:0; padding:0; }

2. 去除項目符號或編號前面的符號

ul,ol,li{ list-style:none; }

3. 全局連接效果

a:link , a:visited{color:#444;text-decoration:none;}

a:hover{color:red;}

4. 網頁中全部的文字大小顏色

body{ font-size:12px; font-family:宋體; color:#ccc; }

5. 去除圖片的連接邊框線

img{border:0;}

6. 全局的類樣式

.floatL{ float:left; }

.floatR{ float:right; }

.clear{clear:both;}

.blank10{ height:10px; clear:both; }

.red{ color:red; }

.blue{ color:blue; }

 

4、經常使用的兼容性調試技巧

1. 實現全部瀏覽器的主頁居中

Firefox下主頁居中代碼：.box{margin:0px auto}

IE5.5下主頁居中代碼：body{text-align:center;}

2. 單行文本上下居中

h1{

　　height: 30px;

　　leight-height: 30px;

}

3. 在IE6下，左右margin會加倍，彷佛是IE6的一個bug。

提示：排版時，能使用padding解決的，堅定不用margin。若是實在想用的話，就使用其中一邊。

解決方案：使用 display: inline;

 

5、CSS HACK

針對不一樣瀏覽器，書寫不一樣的CSS代碼的過程，稱爲「CSS HACK」。

也就是說，寫一個CSS代碼，讓IE6識別，其餘瀏覽器不識別。

下面，針對不一樣的瀏覽器，有幾個符號：

這些符號實在CSS屬性的前面加的，用於分辨不一樣的瀏覽器版本。

"*" IE6和IE7都識別。如：.box{ *background-color:red; }

"_」 只有IE6識別。如：.box{ _background-color:green;}

使用CSS HACK來處理，IE6下左右margin會加倍的問題

注意：CSSHACK不是W3C的標準，所以，咱們儘可能少用。若是你調試兼容性，調試很差時，能夠偶爾用一下。