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

2024-07-11 08:33:39

字體：大中小

來源：轉載

供稿：網(wǎng)友

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS 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瀏覽器中使用。
當然，我們也可以用傳統(tǒng)的用ua給ie10中html元素添加class的方法來實現(xiàn)。
不像其他的解決方案，在這種方法中，實際上是依賴于JavaScript，所以從另一個角度來看，我們是反對的。
當然有人已經(jīng)發(fā)布的改進的版本，這個檢測功能，將不包括IE11，并不需要條件注釋。然而它會引發(fā)““eval is evil”js警告報錯信息。
下面是演示：
在這里，我創(chuàng)建了一個替代版本不具備的eval警告：
http://jsbin.com/okuzut/2/edit
您也可以嘗試，這只是打印出當前的IE版本，這個版本沒有測試：
http://jsbin.com/okuzut/1/edit
但是，這似乎在IE8錯誤，讀為“IE5”，直到您刷新頁面，非常奇怪。