常見瀏覽器相容性bug
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

1、IE6有圖片向左浮動且有向左外邊距或文字向右浮動且有向右外邊距是會出現雙倍外邊距的bug 

在 IE5.0 IE5.5 IE6 中,當為一個塊級元素同時設定了向左浮動(float:left)及左邊距或右邊距(’margin-left’ | ‘margin-right’)後,則該元素的左邊距或右邊距在某些情況下會是設定值的兩倍。同樣地,向右浮動(float:right)及右邊距(’margin-right’)也存在此現象。這個是 IE 著名的 “雙邊距Bug”(IE Double Margin Bug)。

造成的影響:

這種雙倍邊距的怪異現象會對頁面造成很多影響,如意外折行、溢位、文字重疊等諸多相容性問題。

受影響的瀏覽器

IE5.0IE5.5 IE6  

解決方案:將當前元素設定為行級元素,及新增樣式程式碼

  _display:inline;

2、圖片高度超出設定顯示的高度

描述:有時候我們想要顯示影象的一部分,但在IE6中顯示範圍會超出設定的範圍。原因是在IE6下,盒子的最小告訴為12-18px之間,只是為了方便載入文字因為文字的高度一般在12-18px之間,所以IE6一般預設顯示寬度為12-18px,設定的寬度失效。

解決方案:設定font-size,但font-size的最小值為2px。這個時候需要用over-flow來進一步處理。其常用設定值為:

3,子元素向上外邊距會拖動父級元素一起移動

解決方案:子元素設定為浮動,父元素設定向上的邊框或內邊距。

4,瀏覽器樣式屬性初始值不同帶來的bug

解決方案:寫程式碼時進行二 次初始化。

5、程式碼不規範引起的bug

如:三個div,兩個浮動,第三個不浮動。在火狐瀏覽器中,第三個div裡的內容會鑽到第一個div下面。而在IE6中,三個div將一次排放。

解決方案:a.第三個div也設定成浮動(float:left/right);

b.第三個div設定清除以上浮動(clear:left/rignt/both)。

6、子級div的範圍大於父級div時,火狐以父級範圍為準,IE6以子級範圍為準。

解決方案:為父級div設定over-flow屬性。

                

相關文章

程式語言 最新文章