關於css相容性問題及一些常見問題彙總

2022-09-24 15:12:19 字數 1424 閱讀 9092

目前主流瀏覽器的相容性做的都比較好了,本文主要針對ie6,7的不相容問題進行解決。

1.有浮動存在時,計算一定要精確,不要讓內容的寬高超出我們所設定的寬高,ie6下,內容會撐開設定好的高度。

解決方法:給對應的父級加overflow:hidden;但是會有部分被隱藏掉,最好是精確計算寬高再設定

eg:(ie會撐開)

xml/html code複製內容到剪貼簿

2. 在ie6下有元素浮動時,如果寬度需要由內容撐開,就給裡邊的塊元素都加浮動,正常瀏覽器不用加浮動。

eg:xml/html code複製內容到剪貼簿

3. 在ie6下元素的高度的小於19px的時候,會被當做19px來處理

解決辦法:新增overflow:hidden;

4. 在ie6下border:1px dotted #000;中,dotted不支援,會以虛線的方式的出現。

解決方法:切背景平鋪

5. 在所有瀏覽器中子元素的margin-top,margin-bottom值會傳遞給父級;

解決辦法:

a:給父級都新增浮動(或者給子級新增浮動也能解決margin-top問題,但是margin左右值會出現雙倍的值,也就是雙邊據bug問題,下面會講);

b:給父級新增position:relative;(或position:absolute;但是會脫離文件流)

c:新增display:inline-block; 正常瀏覽器,可行,但是ie,7下,塊元素不支援display:inline-block;

d: 給附件新增border屬性,例如border:1px solid red; 正常瀏覽器可行,在ie6下必須再給父級新增zoom:1;

eg:xml/html code複製內容到剪貼簿

6. 在ie6下,塊元素有浮動和和橫向的margin值 ,橫向的margin值會被放大成兩倍。

解決辦法:新增display:inline;

xml code複製內容到剪貼簿

7. 在ie6,7下,li自身沒浮動,但是li的內容有浮動,li下邊就會產生乙個間隙

解決辦法:1.給li加浮動

2.給li加vertical-align:top;

注意:當ie6下最小高度問題,和 li的間隙問題共存的時候, 給li加浮動才能解決。

eg:xml/html code複製內容到剪貼簿

8.當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在ie6下就會失效

解決方法:額,還沒發現

eg:xml/html code複製內容到剪貼簿

9. 在ie6下的文字溢位bug。即:子元素的寬度和父級的寬度相差小於3px的時候,或者兩個浮動元素中間有注釋或者內嵌元素的時候,ie6下文字溢位

解決辦法:用div把注釋或者內嵌元素用div包起來。

eg:xml/html code複製內容到剪貼簿

CSS常見相容性問題總結

瀏覽器的相容性問題,通常是因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示不統一的情況。這裡談到的瀏覽器,主要指ie6 ie7 ie.firefox chrome opera safari 等。但更多的相容還是考慮ie6 ie7 ff之間的鬥爭 先來談談css hack 我們為了讓頁面形成統一的...

CSS常見相容性問題總結

瀏覽器的相容性問題,通常是因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示不統一的情況。這裡談到的瀏覽器,主要指ie6 ie7 ie.firefox chrome opera safari 等。但更多的相容還是考慮ie6 ie7 ff之間的鬥爭 先來談談css hack 我們為了讓頁面形成統一的...

CSS常見相容性問題總結

瀏覽器的相容性問題,通常是因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示不統一的情況。這裡談到的瀏覽器,主要指ie6 ie7 ie.firefox chrome opera safari 等。但更多的相容還是考慮ie6 ie7 ff之間的鬥爭 先來談談css hack 我們為了讓頁面形成統一的...