CSS 兼容問題

CSS常見兼容性問題總結

瀏覽器的兼容性問題一般是由於不一樣的瀏覽器對不一樣的代碼有不一樣的解析形成頁面顯示不統一的狀況，這裏的瀏覽器一般指IE 6,7,8,9... Google Firefox Opera Safari，但更多的狀況仍是須要處理IE 6,7,8 Firefox的兼容問題。

CSS Hack

爲了讓瀏覽器達到統一的顯示效果，須要針對不一樣瀏覽器或者版本寫出對應的可解析的CSS樣式，因此把這個過程叫作CSS Hack

CSS Hack 主要分爲三種：IE條件註釋、CSS屬性前綴、選擇器前綴

（1）IE條件註釋法，即在正常代碼以外添加斷定IE瀏覽器或對應版本的條件註釋，符合條件的瀏覽器或者版本號纔會執行裏邊的代碼。

<!--  lt是小於 gt是大於 lte是小於等於 gte是不小於 !是不等於 -->

<!-- [if IE]> 你想要執行的代碼 <![endif]--> <!-- [if lt IE 8]> 你想要執行的代碼 <![endif]--> <!-- [if ! IE 8]> 你想要執行的代碼 <![endif]-->

（1）IE條件註釋法，即在正常代碼以外添加斷定IE瀏覽器或對應版本的條件註釋，符合條件的瀏覽器或者版本號纔會執行裏邊的代碼。

/* 能夠先使用「\9"標記，將IE分離出來，再用」*"分離出IE6/IE7，最後能夠用「_」分離出IE6 */
/* 因此能夠按着優先級就能給特定的版本捎上特定顏色 */
.type{
    color: #111; /* all */
    color: #222\9; /* IE */
    *color: #333; /* IE6/IE7 */
    _color: #444; /* IE6 */
}

如下狀況IE6能夠識別，當屬性一塊兒寫在{}裏頭時，前者確定會被後者覆蓋。要使!important有效，就應置於多個{}間。

h1{color: #f00 !important; }
h1{color: #000;}
h2{color: #f00 !important; color: #000;}

<h1>test1</h1>
<h2>test2</h2>

在標準模式中：

1. 「-″減號是IE6專有的hack
2. 「\9″ IE6/IE7/IE8/IE9/IE10都生效
3. 「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
4. 「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

（3）選擇器前綴法，顧名思義，就是給選擇器加上前綴。

• IE6可識別 *div{color:red;}
• IE7可識別 *+div{color:red;}
• @media screen\9{...}只對IE6/7生效
• @media \0screen {body { background: red; }}只對IE8有效
• @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
• @media screen\0 {body { background: green; }} 只對IE8/9/10有效
• @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
• @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 等等