ie6,ie7,ie8 css bug相容解決方法

2022-03-08 02:15:17 字數 3138 閱讀 2189

ie瀏覽器以不支援大量的css 屬性出名,同時也因其支援的css屬性中存在大量bug。

普通ie css bug

bug名稱

影響版本

描述

image label focus bug

ie8,ie7,ie6

元素在元素之內,單擊時,焦點不會轉移到相應的表單控制項

按鈕margin-auto非居中

ie8button或類似元素並不居中當作用與它 時候且「寬」是不明確的

不正確的浮動收縮-包裹bug

ie7,ie6

乙個浮動元素(設定了clear屬性)在另乙個浮動元素之後時不能正確的收縮-包裹

overflow滾動條的不一致

ie7,ie6

非常規的在元素上設定overflow屬性可能會出現關於元素的overflow bug

浮動擠壓怪異差距bug

ie7,ie6

倒數第乙個和倒數第二個浮動元素的間距似乎垂直堆疊了

浮動複製最後乙個字元bug

ie7,ie6

浮動元素的最後乙個字元被複製

空元素高度bug

ie7,ie6

有」layout」屬性的空元素獲得高度

表單控制項的雙邊距bug

ie7,ie6

和元素上的水平margin「繼承」於含有margin和layout屬性的祖先

ie7 1畫素點邊框表現為虛線邊框

ie7當至少有1邊的變寬寬度大於1畫素時,1畫素的點邊框表現為虛線邊框

relative overflow失效的bug

ie7,ie6

含有overflow(hidden或auto)屬性的元素的後輩如果含有position:relative屬性,則其表現得就像是設定為visible屬性一樣

ie7 :hover「阻斷」於absolute的bug

ie7當絕對定位的子元素隱藏不可見的時候,使用:hover改變其left/top值貌似是不管用的。如果其可見,left/top也不會因:hover而改變

button按鈕 :active時背景改變bug

ie8當:active狀態應用與或時背景會向上像左移動

忽略:focus的bug

ie8當乙個包含:focus的選擇器在另外乙個簡單的選擇器之後,:focus是被忽略的。

看不見的hover邊框bug

ie8當設定了outline,在:hover狀態下,下邊框要麼沒有完全顯示,要麼短了1畫素(或是取消了outline)

padding/margin百分比bug

ie8與百分比垂直padding特定組合,垂直margin間距似乎會出岔子,在父級的父級設定了padding或border的亦會如此

浮動專案符號混亂bug

ie8在專案列表中含有浮動屬性的的時候,專案標記(或編號)位置不正確或是壓根沒有渲染出來

th標籤text-align不繼承的bug

ie8祖輩的text-align值不會被th元素繼承下來

樣式檔案32的數目限制bug

ie8,ie7,ie6

第32個及其以後的樣式檔案中的樣式一概忽略(i.e. , 或 @import)

白色背景hover無效bug

ie7背景hover後轉為白色背景無效

ie7子選擇器注釋bug

ie7乙個選擇器如果包含子選擇器,且在注釋之後,是被忽略的

星號 html bug

ie6* html選擇器在ie6下不會被無視

ie6 !important忽略bug

ie6如果相當的規則再設定一次,則!important關鍵字將會被忽略

png和背景色的不匹配

ie8,ie7,ie6

儘管有相同的顏色**,但是css中的指定的顏色與png是有差異的

auto margin不居中的偽bug

ie8,ie7,ie6

block屬性元素設定了兩側的margin auto不居中顯示

:first-line!important規則無效bug

ie8當使用了!important修飾語後,:first-line內部的偽class完全不起作用

:first-letter無效bug

ie6全部的:first-letter規則集無效

:first-letter!important無效bug

ie8當使用了!important修飾語後,:first-letter內部的偽class完全不起作用

部分可點選bug

ie6,ie7

只有文字是可點選的/有反應的,非得把滑鼠移到真正的文字上才能有:hover反應,鏈結失效

樓梯bug

ie6,ie7

浮動元素像梯子一樣乙個乙個堆砌

列表背景消失bug

ie6, , 背景消失

noscript幽靈bug

ie8,ie7,ie6

指令碼啟用的時元素顯示,僅border/background從中顯示

透明無法點選的bug

ie8,ie7,ie6

列表內容下沉bug

ie8裡面的內容在專案列表編號的下面

數值不增加bug

ie7,ie6

中顯示的數目不隨著增加

歲月不饒人哪

hjgt

33:利用 css 跨瀏覽器地隱藏文字一法

ont-size:0;        // for firefox & opera

color: transparent; // for webkit

overflow:hidden;    // for ie

font-size:0;

filter:alpha(opacity=0);

自測後相容的瀏覽器如下:

ie 6-8

firefox 1-4

opera 9-10

safari 3-5

chrome 1-6

34:button在chrome下預設有2px的margin

在chrome下有兩畫素margin

35:ie6和ie7裡面margin失效

我的margin在ie裡面失效了

解決辦法去掉裡面div的高度

IE6 IE7 IE8共存方法

這篇文章是很久以前寫的,而現在已經有更好的解決方案了。所以現階段向你推薦的解決方案是 現階段推薦閱讀 多ie版本共存的解決方案 ietester 推薦 windows internet explorer 7 for windows xp sp2簡體中文正式版 4 將 ie7 的安裝檔案 例如 ie7...

IE6 IE7 IE8 FF相容符號

2.區別ie8 ie9 一般來說,我們寫的結構比較好的時候,ie8 9下是沒區別的.所以可能很少人關注只有ie8或只有ie9才識別的css hack.因為ie8及以下版本是不支援css3的,但是我們如果使用css3,在ie下ie9正常渲染,但我們又想讓ie8及以下的瀏覽器實現同樣的效果,且不希望使用...

解決IE6,IE7,IE8換行顯示問題

問題描述 當網頁的內容顯示的視窗不是全屏的時候,有些文字或按鈕會換行顯示,這時我們頭疼的問題來。在網上查詢了一番,有的說如果應用了 應該設定 為指定的寬度,而不應該用百分比來表示寬度,但是有的時候指定寬度是不能代替百分比表示寬度的,因為如果你指定固定寬度,網頁的顯示內容會隨著顯示器的解析度而變化的,...