整理自:http://www.impressivewebs.com/ie10-css-hacks/
中文原文: IE10 CSS hack
請尊重版權,轉載請注明來源,多謝~~
傳說Windows 8剛上市沒幾天就賣出了4000多萬份,好厲害。然后我們就發現項目中很多頁面在IE10中表現不正常了。有的是之前對各版本ie的hack引發的,有些不確定是否是ie10引出的bug,所以慣性思維讓我們重新尋找針對IE10的CSS Hack。。。
首先,ie10不支持條件注釋了。
我們可以用IE私有的條件編譯(conditional compilation)結合條件注釋來提供針對ie10的Hack:
請注意/*@cc_on ! @*/中間的這個感嘆號。
這樣就可以在ie10中給html元素添加一個class=”ie10″,然后針對ie10的樣式可以卸載這個這個選擇器下:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */ } |
條件編譯支持所有版本的ie瀏覽器,而其它瀏覽器不支持。但是很有可能以后IE11出來后,這種方法就失效了。。。
需要注意的是,條件編譯不支持Windows store中的app中使用,只支持在IE瀏覽器中使用。
當然,我們也可以用傳統的用ua給ie10中html元素添加class的方法來實現。
IE10支持媒體查詢,然后也支持-ms-high-contrast這個屬性,所以,我們可以用它來hack ie10:
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) { document.documentElement.className += "ie10"; } |
這種寫法可以適配到高對比度和默認模式。所以可以覆蓋到所有ie10的模式了。
然后這種方式可能也會在后面的IE11中生效。
當然,方法二也可以和方法一一起用:
@media screen and (min-width:0/0) { /* IE9 and IE10 rule sets go here */ } |
不過,估計后面ie10也會普及到Windows 7平臺,所以ie9會消失,只是看看ie8和ie7的份額,這種情況可能不會發生吧。。。
我不想給ie寫hack,嗯,不想為ie多寫一句代碼。
原文來自http://www.cnblogs.com/rubylouvre/archive/2012/12/07/2806775.html
新聞熱點
疑難解答