瀏覽器兼容性彙總--CSS篇

目錄

 

 CSS篇

1.       cursor:hand   VS   cursor:pointer

2.        innerText在IE中能正常工做，但在FireFox中卻不行

3.        CSS透明

4.        css中的width和padding

5.        FF和IE BOX模型解釋不一致致使相差2px

6.        IE5 和IE6的BOX解釋不一致

7.        ul和ol列表縮進問題

8.        元素水平居中問題

9.        Div的垂直居中問題

10.      margin加倍的問題

11.      IE與寬度和高度的問題

12.      頁面的最小寬度

13.      DIV浮動IE文本產生3象素的bug

14.      IE捉迷藏的問題

15.      float的div閉合;清除浮動;自適應高度

16.      高度不適應

17.      IE6下圖片下有空隙產生

18.      對齊文本與文本輸入框

19.      LI中內容超過長度後以省略號顯示

20.      爲何web標準中IE沒法設置滾動條顏色了

21.      爲何沒法定義1px左右高度的容器

22.      連接(a標籤)的邊框與背景

23.      超連接訪問事後hover樣式就不出現的問題

24.      FORM標籤

25.      屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

26.      爲何FF下文本沒法撐開容器的高度

 

CSS篇

1. cursor:hand   VS   cursor:pointer

firefox不支持hand，但ie支持pointer
解決方法:   統一使用pointer

2. innerText在IE中能正常工做，但在FireFox中卻不行.  

需用textContent。
解決方法:
if(navigator.appName.indexOf("Explorer")   >   -1){
        document.getElementById('element').innerText   =   "my   text";
}   else{
        document.getElementById('element').textContent   =   "my   text";
}

3. CSS透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

4. css中的width和padding

在IE7和FF中width寬度不包括padding，在Ie6中包括padding.

5. FF和IEBOX模型解釋不一致致使相差2px

box.style{width:100;border 1px;}
ie理解爲box.width = 100
ff理解爲box.width = 100 + 1*2 = 102  //加上邊框2px

解決方法：div{margin:30px!important;margin:28px;}
注意這兩個margin的順序必定不能寫反， IE不能識別!important這個屬性，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important;

6. IE5 和IE6的BOX解釋不一致

IE5下div{width:300px;margin:0 10px 0 10px;}
div 的寬度會被解釋爲300px-10px(右填充)-10px(左填充)，最終div的寬度爲280px，而在IE6和其餘瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時咱們能夠作以下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7. ul和ol列表縮進問題

消除ul、ol等列表的縮進時，樣式應寫成：list-style:none;margin:0px;padding:0px;
經驗證，在IE中，設置margin:0px能夠去除列表的上下左右縮進、空白以及列表編號或圓點，設置padding對樣式沒有影響；在 Firefox 中，設置margin:0px僅僅能夠去除上下的空白，設置padding:0px後僅僅能夠去掉左右縮進，還必須設置list- style:none才能去除列表編號或圓點。也就是說，在IE中僅僅設置margin:0px便可達到最終效果，而在Firefox中必須同時設置margin:0px、 padding:0px以及list-style:none三項才能達到最終效果。

8. 元素水平居中問題

FF: margin:0 auto;

IE: 父級{ text-align:center; }

9. Div的垂直居中問題

vertical-align:middle; 將行距增長到和整個DIV同樣高：line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行。

10. margin加倍的問題

設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裏面加上display:inline;

例如：

<div id=」imfloat」>
相應的css爲
#imfloat{
float:left;
margin:5px;/*IE下理解爲10px*/
display:inline;/*IE下再理解爲5px*/}

11. IE與寬度和高度的問題

IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。

好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

12. 頁面的最小寬度

如上一個問題，IE不識別min，要實現最小寬度，可用下面的方法：

#container{ min-width: 600px; width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}

第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。

13. DIV浮動IE文本產生3象素的bug

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關鍵}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>

14. IE捉迷藏的問題

當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。

有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。

解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。

15. float的div閉合;清除浮動;自適應高度

①  例如：＜div id=」floatA」>＜div id=」floatB」>＜div id=」NOTfloatC」>

這裏的NOTfloatC並不但願繼續平移，而是但願往下排。(其中floatA、floatB的屬性已經設置爲float:left;)

這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。在＜div class=」floatB」>＜div class=」NOTfloatC」>之間加上＜div class=」clear」>這個div必定要注意位置，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。而且將clear這種樣式定義爲爲以下便可：.clear{clear:both;}

②做爲外部 wrapper 的 div 不要定死高度,爲了讓高度能自適應，要在wrapper裏面加上overflow:hidden; 當包含float的box的時候，高度自適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;能夠作到，這樣就達到了兼容。
例如某一個wrapper以下定義：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③對於排版,咱們用得最多的css描述可能就是float:left.有的時候咱們須要在n欄的float div後面作一個統一的背景,譬如:

<div id=」page」>

<div id=」left」>＜/div>
<div id=」center」>＜/div>
<div id=」right」>＜/div>

</div>

好比咱們要將page的背景設置成藍色,以達到全部三欄的背景顏色是藍色的目的,可是咱們會發現隨着left center right的向下拉長,而page竟然保存高度不變,問題來了,緣由在於page不是float屬性,而咱們的page因爲要居中,不能設置成float,因此咱們應該這樣解決：

<div id=」page」>

<div id=」bg」 style=」float:left;width:100%」>

<div id=」left」>＜/div>
<div id=」center」>＜/div>
<div id=」right」>＜/div>

</div>

</div>

再嵌入一個float left而寬度是100%的DIV解決之。

④萬能float 閉合(很是重要!)

關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將如下代碼加入Global CSS 中,給須要閉合的div加上class="clearfix" 便可,屢試不爽。

/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

或者這樣設置：.hackbox{ display:table; //將對象做爲塊元素級的表格顯示}

16. 高度不適應

高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或padding時。

例：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p對象中的內容＜/p>
</div>

解決技巧：在P對象上下各加2個空的div對象CSS代碼{height:0px;overflow:hidden;}或者爲DIV加上border屬性。

17. IE6下圖片下有空隙產生

解決這個BUG的技巧有不少,能夠是改變html的排版,或者設置img爲display:block或者設置vertical-align屬性爲vertical-align:top/bottom/middle/text-bottom 均可以解決.

18. 對齊文本與文本輸入框

加上vertical-align:middle;

<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>

經驗證，在IE下任一版本都不適用，而ff、opera、safari、chrome均OK！

19. li中內容超過長度後以省略號顯示

此技巧適用與IE、Opera、safari、chrom瀏覽器，FF暫不支持。

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

-->
</style>

20. 爲何web標準中IE沒法設置滾動條顏色了

解決辦法是將body換成html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
＜/style>

21. 爲何沒法定義1px左右高度的容器

IE6下這個問題是由於默認的行高形成的,解決的技巧也有不少：

例如:overflow:hidden　 zoom:0.08 　 line-height:1px

16.怎麼樣才能讓層顯示在FLASH之上呢

解決的辦法是給FLASH設置透明

<param name="wmode" value="transparent" />

22. 連接(a標籤)的邊框與背景

a連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照menubar, 給 a 和menubar設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在menubar中插入一個空格。

23. 超連接訪問事後hover樣式就不出現的問題

被點擊訪問過的超連接樣式不在具備hover和active了,不少人應該都遇到過這個問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A

Code:

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

24. form標籤

這個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,所以,若是想顯示一致,因此最好在css中指定margin和 padding,針對上面兩個問題,個人css中通常首先都使用這樣的樣式ul,form{margin:0;padding:0;}。

25. 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

p[id]{}div[id]{}

這個對於IE6.0和IE6.0如下的版本都隱藏,FF和OPera做用.屬性選擇器和子選擇器仍是有區別的,子選擇器的範圍從形式來講縮小了,屬性選擇器的範圍比較大,如p[id]中,全部p標籤中有id的都是一樣式的.

26. 爲何FF下文本沒法撐開容器的高度

標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度,又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義:

{ height:auto!important; height:200px; min-height:200px; }