PC端瀏覽器常見相容問題及解決方案

2021-07-24 13:25:23 字數 1042 閱讀 7602

1.ie6塊級元素設定float之後,設定的橫向margin樣式margin加倍

debug:

將該塊級元素設定樣式 display:inline

2.ie6預設有行高

debug:

overflow:hidden;或者font-size:0;或者設定行高

3.ie6中如果為li設定寬高,且li內部元素設定float,li之間會有間距

debug:

事實上我們主張在li裡加入div這樣的元素,但如果您真的要這麼做,那麼解決這個bug需要

不給li設定寬高或者將內部的float使用display:inline代替。

4.ie6下z-index失效

產生原因:

父標籤position:relative或者問題標籤含有float

debug:

設定子標籤的z-index還要設定父標籤的z-index從而確定層級關係

5.ie6中產生間隙

debug:

為img標籤設定display:block

6.png24位的在ie6上出現背景

debug:

改為png8

/*類內部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*/

常見瀏覽器相容問題及解決技巧

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

常見瀏覽器相容問題及解決技巧

height 300px的時候會認為高時300px 繼續往下讀,他也認識 heihgt,所以當ie6讀到 height 200px的時候會覆蓋掉前一條的相衝突設定,認為高度是200px。繼續往下讀,ie6還認識 height,所以他又會覆蓋掉200px高的設定,把高度設定為100px ie7和遨遊也...

常見瀏覽器相容問題

1 針對ie5以下和 ie5 firefox 引入檔案區別 import url newstyle.css 後者可以識別,前者不能識別 2 針對ie和firefox指定裝置型別選項 import url newstyle.css screen 後者可以識別,前者不能識別 3 注釋區別 content...