常見瀏覽器的相容問題

初學html和css時，每天切圖，總會遇到很多瀏覽器相容性問題。最近一直關注移動平台開發，就html和css來說，不用考慮那麼多瀏覽器相容性問題。到現在，以至於很多瀏覽器相容性幾乎忘光了。今天把以前總結的知識拿來分享一下，順便自己也複習一下。當然，其中肯定有很多不足，望指正啊。

產生因素：塊屬性、float、有橫向margin。

解決方法：display：inline；

解決方法：overflow:hidden;或font-size:0;或line-height：xx px；

解決方法:讓浮動。

解決方法：a 在子標籤最後清浮動

b 父標籤新增

c 給父標籤設定高度

解決方法：(1)：.abc

html>body .abc

(2)：.abc（因為ie6有乙個特徵，當定義乙個高度時，如果內容超過高度，元素會自動調整高度。）

解決方法：li不設寬、高或者li內的標籤不浮動

解決方法：li 設定vertical-align:middle;

解決方法：用hack技術，例如：所有瀏覽器通用 height:100px;

ie6專用_height:100px;

ie7專用*+height:100px;

ie6/ie7共用*height:100px;

解決方法：在行內元素裡加入

解決辦法：給浮動元素新增display:inline;。

filter：alpha（opacity=80）；/*ie支援該屬性*/

opacity：0.8；/*支援css3的瀏覽器*/

---------------------------2014.01.10補充-------------------------------

對於非ie6可以這樣寫

*/#top

/*但是ie6是不支援fixed定位的，需要另外重寫

*/#top

/*使用hack使ie6實現該效果，但這個東東會閃爍，需要以下**

*/*html

/*使固定在頂部

*/#top

/*固定在底部

*/#top

/*垂直居中

*/#top

最小寬度

*/.min_width

/*最大寬度

*/.max_width

/*最小高度

*/.min_height

/*最大高度

*/.max_height

1）ie6下首先講講第一種z-index無論設定多高都不起作用情況。這種情況發生的條件有三個：1、父標籤position屬性為relative；2、問題標籤含有浮動(float)屬性。

2）所有瀏覽器：它只認第乙個爸爸

層級的高低不僅要看自己，還要看自己的老爸這個後台是否夠硬。用術語具體描述為：

父標籤position屬性為relative或absolute時，子標籤的absolute屬性是相對于父標籤而言的。而在ie6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

類內部hack：

*/.header /*

ie6專用

*/.header /*

ie7專用

*/.header /*

ie6、ie7共用

*/.header /*

ie8、ie9共用

*/.header /*

ie6、ie7、ie8、ie9共用

*/.header /*

ie9專用

*//*

選擇器hack：

*/*html .header{} /*

ie6*/

*+html .header{} /*

ie7*/

常見瀏覽器的相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器的相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

相關推薦