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

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

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


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


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

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


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


實(shí)例：



方法三：@media 0
這個(gè)有些變態(tài)了，而且不太完美，因?yàn)镮E9也支持media，也支持\0的hack：


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

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

最新評論