IE瀏覽器下常見的CSS相容問題

2021-09-01 15:47:51 字數 3223 閱讀 2127

**

加粗樣式ie6-瀏覽器下子元素能撐開父級設定好的寬高
ie6-瀏覽器下最小高度問題，設定(0-15px)高度小於等於15px的元素，在ie6下會被當作15px來處理

【解決】

[1]設定font-size為0，但最小高度為2px

[2]設定overflow:hidden，但最小高度為1px

[3]要想實現最小高度為0，只能是不設定高度

邊框bug


ie6-瀏覽器下1px的點線邊框，點線會變成虛線


標準下背景會延伸到邊框區，而ie7-瀏覽器下背景只延伸到padding區
在ie10-瀏覽器下被標籤包含的元素會產生邊框

【解決】給設定
ie7-瀏覽器下父級有邊框，無法阻止子元素的上下margin值傳遞

【解決】觸發父級的haslayout

ie7-瀏覽器下不設定文件宣告會導致怪異盒模型解析。在怪異盒模型下內容寬=width-2*padding-2*borderwidth
ie6-瀏覽器下使用margin負值，使元素移出父級，移出部分會被父級裁掉

【解決】給子級加相對定位relative
(li的4px空隙bug)ie7-瀏覽器下，li本身沒浮動，但內容有浮動，li下邊會多出4px的空隙

【解決】

[1]給li加浮動

[2]設定vertical-align
(li下的4px間隙和最小高度共存的問題)ie7瀏覽器下，當li下的4px間隙問題和最小高度問題共存的時候，設定垂直對齊方式無效

【解決】給li加浮動
(li的3px空隙bug)ie7-瀏覽器下li有高度或寬度或zoom:1，且僅包含內聯元素，且內聯元素被設定為display:block，li下會多出3px的垂直間距

【解決】觸發li中子元素的haslayout
**

(3pxbug)在ie6-瀏覽器下浮動元素和非浮動元素相鄰時，會出現3px畫素的空隙

【解決】

[1]使用csshack，給浮動元素設定相反方向的-3px的margin值，將非浮動元素的相應方向的margin設為0(加ie6字首)

[2]去掉非浮動元素的margin值，加浮動。
ie6-下父元素浮動後，且子元素設定了高度，如果父元素不設定寬度，寬度會撐滿整行

【解決】

[1]給浮動的父元素設定寬度

[2]給子元素設定寬度

[3]給子元素設定浮動
(浮動折行)在ie7-瀏覽器下，如果兩個元素乙個右浮動，乙個不浮動。浮動元素會折到下一行

【解決】

[1]給不浮動的元素也加浮動

[2]在html中先放右浮動的元素

我是不浮動


我是右浮動
(雙邊距bug)ie6-瀏覽器下塊元素有浮動，且有橫向的margin值。若僅有左margin，最左邊的浮動的塊元素的左margin會放大成兩倍。若僅有右margin，最右邊的浮動的塊元素的右margin會放大成兩倍。若左右都有，最左邊的左margin和最右邊的右margin會放大成兩倍。

【解決】給塊元素設定display:inline

(margin-bottombug)在ie7-瀏覽器下父級寬度和每行元素的寬度之和相差超過3px時，或者有不滿行的情況，最後一行的margin-bottom失效


【解決】盡量不要用margin-bottom，而用margin-top代替
(文字溢位bug)ie6-瀏覽器下兩個浮動元素(浮動元素不能是li)乙個左浮無寬度，另乙個右浮動寬度與父級寬度相差不超過3px，浮動元素中間有注釋或者內聯元素，文字就被複製

【解決】

[1]將注釋去掉

[2]將內聯元素變成塊元素

[3]內聯元素及注釋整個用

包起來

多出來的一頭豬嗎
在ie7-瀏覽器下子元素有相對定位，父級的overflow無效

【解決】給父級也設定相對定位
在ie6-瀏覽器下浮動元素和絕對定位元素是並列關係，且浮動元素設定margin-left和width的和正好等於父元素的寬度，這時絕對定位元素會消失

【解決】給定位元素外麵包乙個div
在ie6-瀏覽器下絕對定位元素的父級元素的寬度為奇數時，元素的right會有1px的偏差；高度為奇數時，元素的bottom會有1px的偏差

表單bug


ie6-瀏覽器下label標籤只支援for屬性，不支援僅僅包含的寫法


【解決】使用for屬性


label測試文字
(input空隙問題)當input元素被div包圍時，ie6-瀏覽器下它們之間上下會各多出1px的空隙；而ie7、8瀏覽器下它們之間的上邊會多出1px的空隙

【解決】給input加浮動
ie6-瀏覽器下當input元素被div包圍時，在已經給input設定浮動的情況下，設定border:none無法得到理想效果

【解決】

[1]設定border:0

[2]重置input的背景
ie7-瀏覽器下輸入型別表單控制項如、等輸入文字時，背景影象會跟著文字一起滾動

【解決】把背景加給父級，並清掉自身背景
ie6-瀏覽器中select控制項無法被

覆蓋，因為在ie6中select控制項是處於最頂層的。

【解決】iframe比select優先順序高，把iframe巢狀在

裡面，並設定為不可見

test1


test2


test3
原文：

IE瀏覽器下常見的CSS相容問題

ie6 瀏覽器下子元素能撐開父級設定好的寬高 ie6 瀏覽器下最小高度問題，設定 0 15px 高度小於等於15px的元素，在ie6下會被當作15px來處理 解決 1 設定font size為0，但最小高度為2px 2 設定overflow hidden，但最小高度為1px 3 要想實現最小高度為0...

ie瀏覽器相容筆記

ie低版本瀏覽器預設很多標籤是自帶樣式的。ul預設室友padding left 40px li標籤的預設樣式是跟其他瀏覽器不一樣的。預設帶有左邊距16px左右，設定屬性如下即可解決list style position outside position後記得在relative屬性的元素設定浮層 z ...

ie瀏覽器相容筆記

某某 經理讓你相容ie瀏覽器 我的內心 1.html 寫法不標準。有的html 不夠嚴謹，就會造成在ie瀏覽器下各種的問題。比如標題，最好不要直接用li標籤，最好外面有個div包裹，li列表外面需要有ul標籤包裹。應該載入一段公共css 去除某些樣式的預設初始屬性。body,div,dl,dt,dd...