1. 首頁 > 生活經驗 > >

ie10 css hack 條件注釋等兼容方式整理

ie10已經上線一段時間了，相信已經有一部分前端潮人體驗過了，但是針對ie10的css hack大家了解嗎？
去年微軟宣布，win8的Metro版IE10將不再支持插件，并且不再支持條件注釋 ， 這顯然是一個冒險的舉動 。截至到現在，在ie6到ie9的瀏覽器各種各樣的古怪行為，開發人員不得不使用條件注釋，有條件的類 ， 和其他特定于IE的css hack來解決 。

ps:條件注釋是一種安全的區分IE瀏覽器版本的語法，且被認為是取代針對IE css hack的首選辦法 。
但是，如果IE10不再支持條件注釋，我們唯一的選擇只能針對css的問題用css hack或者判斷瀏覽器來解決 我們當然不希望試用后者 。
有趣的是，國外已經出現了牛人的解決方法 ， 當然不是專門使用一個css hack 解決問題的的代碼片段 。下面是給出這三項技術的總結，以供參考 。

方法一：特性檢測：@cc_on
我們可以用IE私有的條件編譯(conditional compilation)結合條件注釋來提供針對ie10的Hack：該腳本里面的IE排除條件注釋，以確保IE6-9不承認它，然后它功能檢測到了名為@ cc_on 。在這里：

復制代碼代碼如下:
!DOCTYPE html
html
head
meta charset=utf-8 /
titleJS Bin/title
/head
body
!--[if !IE]!--script
if (/*@cc_on!@*/false) {
document.documentElement.className =’ ie10’;
}
/script!--![endif]--
/body
/html

請注意/*@cc_on ! @*/中間的這個感嘆號 。
這樣就可以在ie10中給html元素添加一個class=ie10，然后針對ie10的樣式可以卸載這個這個選擇器下：

復制代碼代碼如下:
.ie10 .example {
/* IE10-only styles go here */
}

條件編譯支持所有版本的ie瀏覽器，而其它瀏覽器不支持 。但是很有可能以后IE11出來后，這種方法就失效了 。。。
需要注意的是，條件編譯不支持Windows store中的app中使用，只支持在IE瀏覽器中使用 。
當然，我們也可以用傳統的用ua給ie10中html元素添加class的方法來實現 。
不像其他的解決方案，在這種方法中，實際上是依賴于JavaScript，所以從另一個角度來看，我們是反對的 。
當然有人已經發布的改進的版本，這個檢測功能，將不包括IE11，并不需要條件注釋 。然而它會引發eval is eviljs警告報錯信息 。
下面是演示：
在這里，我創建了一個替代版本不具備的eval警告：
http://jsbin.com/okuzut/2/edit
您也可以嘗試，這只是打印出當前的IE版本，這個版本沒有測試：
http://jsbin.com/okuzut/1/edit
但是，這似乎在IE8錯誤，讀為IE5，直到您刷新頁面，非常奇怪 。

方法二：@media -ms-high-contrast
IE10支持媒體查詢，然后也支持-ms-high-contrast這個屬性，所以，我們可以用它來hack ie10：

復制代碼代碼如下:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}

這種寫法可以適配到高對比度和默認模式 。所以可以覆蓋到所有ie10的模式了 。
然后這種方式可能也會在后面的IE11中生效 。
當然，方法二也可以和方法一一起用：

復制代碼代碼如下:
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className= "ie10";
}

實例：

復制代碼代碼如下:
!DOCTYPE html
html
head
meta charset=utf-8 /
titleJS Bin/title
/head
body
/body
/html


方法三：@media 0
這個有些變態了，而且不太完美，因為IE9也支持media，也支持的hack：

復制代碼代碼如下:
@media screen and (min-width:0) {
/* IE9 and IE10 rule sets go here */
}

不過 ， 估計后面ie10也會普及到Windows 7平臺，所以ie9會消失，只是看看ie8和ie7的份額，這種情況可能不會發生吧 。

結束語
事實是，你不應該使用css hack針對IE10瀏覽器，甚至是IE9瀏覽器 。使用一個很好的CSS工作流程 ， 在編寫代碼時，應用良好的原則 。
而在大多數情況下，當不同的，你應該能功能檢測，以填補空白，或者使用優美的退化允許接受的經驗IE10 。
如果任何人有任何其他的關于ie10 css hack的相關信息，或知道任何其他的針對IE10的條件注釋方法，歡迎更新相應的方法 。

相關經驗推薦