常見瀏覽器相容性bug

2021-07-27 05:50:03 字數 1217 閱讀 4238

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  

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

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屬性。

常見瀏覽器相容性

1 ie5.5及其以前版本的瀏覽器對於盒模型理解上的錯誤 div width 200px padding 5px border 1px solid cccccc 在ie5.5中div 內容的寬度將是200px 5px 1px 5px 1px 188px.在firefox,opera 及ie6等瀏覽器...

瀏覽器相容性常見

瀏覽器相容性常見 瀏覽器相容問題 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫 個標籤,不加樣式控制的情況下,各 的margin 和padding差異較 碰到頻率 100 解決 案 css 備註 這個是最常 的也是最易解決的 個瀏覽器相容性問題,乎所有的css 件開頭都會 萬用字元 來...

常見的瀏覽器相容性

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 解決方案 css裡 瀏覽器相容問題二 塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大 解決方案 在float的標籤樣式控制中加入 display inline 將其轉化為行內屬性 瀏覽器相容問題三 ...