DIV CSS 佈局教程網

IE CSS Bug
編輯:CSS詳解     
最讓人頭痛的當數IE,特別是IE6。搞定了IE6,基本也就能稱霸半個江山了。搞定了IE,也相當於占領了7、80%的領地。你想做一個統治頁面兼容的主麼?反正我是想的。

作為一名前端,我們通常要做的就是讓頁面在各系統A-Grade浏覽器,甚至網站浏覽份額0.1%以上的浏覽器上良好顯示。當然,還有性能問題。不過,今天要說的是樣式的兼容問題。在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 這些浏覽器的兼容,無不讓前端們頭痛。而在這之中,最讓人頭痛的當數IE,特別是IE6。搞定了IE6,基本也就能稱霸半個江山了。搞定了IE,也相當於占領了7、80%的領地。你想做一個統治頁面兼容的主麼?反正我是想的。

今天,趁著想完善公司的內部樣式框架,把HasLayout.Net的IE CSS Bug過了一遍。整理中收獲了不少東西,一些官方的不足,也根據自己的知識升級了一下。當然,也順利地升級了框架的一些內容,感覺甚爽。隨後,便將一些值得去看的Bug整理成一個列表,基於Alipay前端偉大的分享精神,分享出來以供團隊工友們和大家參考。

同時,由於整理倉促,有些理解和表達不當和其他纰漏在所難免,還請大家幫忙更正。謝謝。

  問題 浏覽器 DEMO 解決方法 Hacking Rules:

 

property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:IE6;

1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug |fixed 為input添加width 2 body{overflow:hidden;}沒有去掉滾動條 IE6/7 bug |fixed 設置Html{overflow:hidden;} 3 hasLayout的標簽擁有高度 IE6/7 bug |fixed *height:0;
_overflow:hidden; 4 form>[hasLayout]元素有margin-left時,子元素中的[input | textarea] 出現2×margin-left IE6/7 bug |fixed form > [hasLayout 元素]{margin-left:寬度;}
form div{*margin-left:寬度÷2;} 5 當border-width有1條<邊3條時被設置成dotted時,1px的邊dotted顯示成dashed IE7 bug |fixed 不在同一個元素上使用不同寬度的 dotted 6 當子元素有position:relative的時候,父元素設置overflow:[hidden|auto]相當於給子元素設置了position:visible; IE6/7 bug |fixed 給父元素設置position:relative; 7 :hover偽類不能改變有position:absolute的子級元素的left/top值 IE7 bug |fixed 把top/left的值設置成除0%外的所有百分值;或添加一個margin-[所有方向]除0外的所有值,包括0% 8 :focus + selector {} 選擇器失效 IE8 bug |fixed 在失效選擇器後面添加一個空選擇器, :focus{} 9 列表中混亂的浮動:在list中浮動圖片時,圖片出現溢出正常位置;或沒有list-style IE8 bug |fixed 用背景圖片替換list-style 10 th 不會自動繼承上級元素的 text-align IE8 bug |fixed 給th添加text-align:inherit; 11 樣式(包括link/style/@import(link)) 最多允許個為是:32 IE6-8 ─ 常識 99.99%的情況下,不會遇到 12 :hover 時若background-color為#fff, 失效 IE7 bug |fixed 把background-color改成background。或者,非#fff || #ffffff 13 忽略’>’後有注釋的選擇器:selector> /**/ selector{} IE7 bug |fixed 官方DEMO有誤 14 * Html IE6 ─ HACK 只對IE6有效 15 PNG圖片中的顏色和背景顏色的值相同,但顯示不同 IE6-7 bug |fixed 利用 pngcrush 去除圖片中的 Gamma profiles 16 margin:0 auto; 不能讓block元素水平居中 IE6-8 bug |fixed 給block元素添加一個width 17 使用偽類 :first-line | :first-letter, 屬性的值中出現!important 會使屬性失效 IE8 bug |fixed !important is evil, don’t use it anymore 18 :first-letter 失效 IE6 bug |fixed 把 :first-letter 移到離{}最近的地方,如 h1, p:first-letter{},而非 p:first-letter h1{} 19 Position:absolute元素中,a display:block, 在非:hover時只有文本可點擊 IE6/7 bug |fixed 給a添加background, 如果背景透明,使用background:url(‘任何頁面中已經緩存的文件鏈接’),不推薦background:url(#)[官方的解決方法],因為會增加一下HTTP請求 20 float列表元素不水平對齊:li不設置float,a設置display:block;float:[方向],li不水平對齊 IE6/7 bug |fixed 給li設置display:inline 或 float:[方向] 21 dt, dd, li 背景失效 IE6 bug |fixed dt, dd, li{position:relative;} 22 <noscript />元素的樣式在啟用Javascript的情況下顯示了樣式 IE6-8 bug |fixed 利用JS給<noscript />添加display:none; 23 使用filter處理的透明背景圖片的透明部分不可點 IE6-8 bug |fixed 把background:none變成background:url(‘鏈接’),鏈接到本身和圖片之外的任何文件 24 li內元素偏離 baseline 向下拉 IE8 bug |fixed 給li設置display:inline 或 float:[方向] 25 列表中li的list-style不顯示 IE6/7 bug |fixed 給li添加margin-left,留空間來顯示(不要加在ul上) 26 圖片不能垂直居中 IE6/7 bug/fixed 添加一個空標簽,並賦給”Layout”, 比如display:inline-block; 27 不能自定義指針樣式 IE6-8 bug |fixed 給指針文件設置絕對路徑 28 背景溢出,拖動滾動條後顯示正常 IE6 bug |fixed 給父元素添加overflow:hidden防止溢出,並賦予hasLayout,如果添加_zoom:1; 29 高度超過height定義的高 IE6 bug/fixed 添加_overflow:hidden;(推薦)或者_font-size:0; 30 寬度超過width定義的寬 IE6 bug/fixed 添加_overflow:hidden; 31 雙倍邊距 IE6 ─ 常識 添加display:inline到float元素中 32 margin負值隱藏:hasLayout的父元素內的非hasLayout元素,使用負邊距時,超出父元素部分不可見 IE6/7 bug/fixed 去掉父元素的hasLayout;或者賦hasLayout給子元素,並添加position:relative; 33 給兩個浮動元素的某中一個的文字設定為斜體,另一個元素下拉在有斜體文字元素的下面 IE6 bug/fixed 給有斜體文字的元素添加overflow:hidden; 35 3px 間隔:在float元素後的元素,會有3px間隔 IE6 bug/fixed 因為是確切的3px,所以,用“暴力破解”吧,比如_margin-left:-3px; 35 text-align 影響塊級元素 IE6/7 bug/fixed 整理你的float;或者分開設置text-align
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved