當然，還有性能問題。不過，今天要說的是樣式的兼容問題。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 這些瀏覽器的兼容，無不讓前端們頭痛。而在這之中，最讓人頭痛的當數IE，特別是IE6。搞定了IE6，基本也就能稱霸半個江山了。搞定了IE，也相當于占領了7、80%的領地。你想做一個統治頁面兼容的主么？反正我是想的。
| 問題 | 瀏覽器 | DEMO | 解決方法 | |
|---|---|---|---|---|
| Hacking Rules:
property:all-ie/9; property:gte-ie8/0;*property:lte-ie7; +property:ie7; _property:ie6; | ||||
| 1 | input 不能用 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 |
