DIV 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