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