CSS相容性

1. CSS中幾種浏覽器對不同關鍵字的支援，可進行浏覽器相容性重複定義</P><P>!important 可被FireFox和IE7識别</P><P>* 可被IE6、IE7識别</P><P>_ 可被IE6識别</P><P>*+ 可被IE7識别</P><P>

1. CSS中幾種浏覽器對不同關鍵字的支援，可進行浏覽器相容性重複定義

!important 可被FireFox和IE7識别

* 可被IE6、IE7識别

_ 可被IE6識别

*+ 可被IE7識别

2.IE專用的條件注釋

3. 幾個浏覽器對實際像素的解釋

IE/Opera：對象的實際寬度 = (margin-left) + width + (margin-right)

Firefox/Mozilla：對象的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4.滑鼠手勢問題：FireFox的cursor屬性不支援hand，但是支援pointer，IE兩個都支援；是以為了相容都用pointer

5.FireFox中設定HTML标簽的Style屬性時，所有位置、寬高和尺寸值必須後跟px，IE也支援此寫法，是以統一加px機關。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;

6.FireFox無法解析簡寫的padding屬性設定，如padding 5px 4px 3px 1px；必須改為 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；

7.消除ul、ol等清單的縮進時，樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效

8.CSS控制透 明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox：opacity:0.6;

9.CSS控制圓角：IE：不支援圓角；

FireFox: -moz-border-radius:4px;或

-moz-border-radius-topleft:4px;

-moz-border-radius-topright:4px;

-moz-border-radius-bottomleft:4px;

-moz-border-radius- bottomright:4px;

10.CSS雙線凹凸邊框：IE：border:2px outset;

FireFox：

-moz-border-top-colors: #d4d0c8 white;

-moz-border-left-colors: #d4d0c8 white;

-moz-border-right-colors:#404040 #808080;

-moz-border-bottom-colors:#404040 #808080;

11.IE支援CSS方法cursor:url()自定義光标樣式檔案和滾動條顔色風格；FireFox對以上兩者均不支援

12.IE有Select控件永遠處于最上層的bug,且所有CSS對Select控件都不起作用

13.IE支援Form中的Label标簽，包括圖檔和文字内容；FireFox不支援包含圖檔的Label，點選圖檔不能讓标記 label for 的Radio或CheckBox産生效果

14.FireFox中的TextArea不支援onScroll事件

15.FireFox不支援display的inline和block

16.FireFox對Div設定margin-left, margin-right為auto時已經居中, IE中不行

17.FireFox對Body設定text-align時, Div需要設定margin: auto(主要是margin-left margin-right) 方可居中

18.對超連結的CSS樣式設定最好遵從這樣的順序：L-V-H-A。即

這樣可以避免一些通路過後的超連結就不具備hover和active樣式了

19.IE中設定長段落自動換行在CSS中設定word-wrap:break-word；FireFox中使用JS插入 的方法來實作，具體代碼如下：

20.在子容器加了浮動屬性後,該容器将不能自動撐開

解決方法：在标簽結束後下一個标簽中加上一個清除浮動的CSS clear:both;

21.浮動後IE6解釋外邊距為實際邊距的雙倍

解決辦法：加上display:inline

22.IE6下圖檔下方會有空隙

解決辦法：為img加上display:block或設定vertical-align 屬性為vertical-align:top | bottom |middle |text-bottom

23.IE6下兩個層中間有空隙

解決辦法：設定右側div也同樣浮動float:left或者相對IE6定義 margin-right:-3px;

24.LI中内容超過長度後以省略号的顯示方法

25.将元素的高度和行高設為相同值，即可垂直居中文本

26.對齊文本與文本輸入框，須在CSS中增加vertical-align:middle;屬性設定

27.支援web标準的浏覽器設定了固定高度值就不會像IE6那樣被撐開，但是又想設定固定高度又想能夠被撐開呢?解決辦法是去掉height屬性而設定min-height，為了相容不支援min-height的IE6可以這樣定義：

{

height:auto!important;

height:200px;

min-height:200px;

}

28.web标準中IE無法設定滾動條顔色

解決辦法：在CSS中對body的設定改為對html的

29.IE6由于預設行高問題無法定義1px左右高度的容器，

解決辦法：在CSS中對容器設定如：overflow:hidden | zoom:0.08 | line-height:1px

30.給Flash設定透明屬性可使層顯示在Flash之上

⊙該文章轉自[大賽人網站(技能大賽技術資源網)-DasaiRen.com] 原文連結：http://www.dasairen.com/Dreamweaver/1925351128.html