做爲一名前端，咱們一般要作的就是讓頁面在各系統A-Grade瀏覽器，甚至網站瀏覽份額0.1%以上的瀏覽器上良好顯示。固然，還有性能問題。不過，今天要說的是樣式的兼容問題。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 這些瀏覽器的兼容，無不讓前端們頭痛。而在這之中，最讓人頭痛的當數IE，特別是IE6。搞定了IE6，基本也就能稱霸半個江山了。搞定了IE，也至關於佔領了七、80%的領地。你想作一個統治頁面兼容的主麼？反正我是想的。javascript
今天，趁着想完善公司的內部樣式框架，把HasLayout.net的IE CSS Bug過了一遍。整理中收穫了很多東西，一些官方的不足，也根據本身的知識升級了一下。固然，也順利地升級了框架的一些內容，感受甚爽。隨後，便將一些值得去看的Bug整理成一個列表，基於Alipay前端偉大的分享精神，分享出來以供團隊工友們和你們參考。css
同時，因爲整理倉促，有些理解和表達不當和其餘紕漏在所不免，還請你們幫忙更正。謝謝。
html
| 問題 | 瀏覽器 | 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 |