IE10 CSS hack

文章目錄

• 方法一：特性檢測：@cc_on
• 方法二：@media -ms-high-contrast
• 方法三：@media 0
• 總結：

整理自：http://www.impressivewebs.com/ie10-css-hacks/

中文原文： IE10 CSS hack 請尊重著作權，轉載請註明來源，多謝~~

傳說Windows 8剛上市沒幾天就賣出了4000多萬份，好厲害。然後我們就發現項目中很多頁面在IE10中表現不正常了。有的是之前對各版本ie的hack引發的，有些不確定是否是ie10引出的bug，所以慣性思維讓我們重新尋找針對IE10的CSS Hack。。。

首先，ie10不支援條件注釋了。

方法一：特性檢測：@cc_on

我們可以用IE私人的條件編譯(conditional compilation)結合條件注釋來提供針對ie10的Hack：

12345

<!--[if !IE]><!--<script> if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10'; } </script><!--<![endif]-->

請注意/*@cc_on ! @*/中間的這個驚嘆號。

這樣就可以在ie10中給html元素添加一個class=”ie10″，然後針對ie10的樣式可以卸載這個這個選取器下：

123	.ie10 .example { /* IE10-only styles go here */ }

條件編譯支援所有版本的ie瀏覽器，而其它瀏覽器不支援。但是很有可能以後IE11出來後，這種方法就失效了。。。

需要注意的是，條件編譯不支援Windows store中的app中使用，只支援在IE瀏覽器中使用。

當然，我們也可以用傳統的用ua給ie10中html元素添加class的方法來實現。

方法二：@media -ms-high-contrast

IE10支援媒體查詢，然後也支援-ms-high-contrast這個屬性，所以，我們可以用它來hack ie10：

123	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */ }

這種寫法可以適配到高對比和預設模式。所以可以覆蓋到所有ie10的模式了。

然後這種方式可能也會在後面的IE11中生效。

當然，方法二也可以和方法一一起用：

123	if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) { document.documentElement.className += "ie10";}

方法三：@media 0

這個有些變態了，而且不太完美，因為IE9也支援media，也支援\0的hack：

123	@media screen and (min-width:0\0) { /* IE9 and IE10 rule sets go here */ }

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

總結：

我不想給ie寫hack，嗯，不想為ie多寫一句代碼。。。