首先，ie10不支持條件註釋了。css
方法一：特性檢測：@cc_on
咱們能夠用IE私有的條件編譯(conditional compilation)結合條件註釋來提供針對ie10的Hack：html
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
|
請注意/*@cc_on ! @*/中間的這個感嘆號。web
這樣就能夠在ie10中給html元素添加一個class=」ie10″，而後針對ie10的樣式能夠卸載這個這個選擇器下：瀏覽器
@media
screen
and (-ms-high-contrast: active), (-ms-high-contrast:
none
) {
/* IE10-specific styles go here */
}
|
條件編譯支持全部版本的ie瀏覽器，而其它瀏覽器不支持。可是頗有可能之後IE11出來後，這種方法就失效了。。。app
須要注意的是，條件編譯不支持Windows store中的app中使用，只支持在IE瀏覽器中使用。spa
固然，咱們也能夠用傳統的用ua給ie10中html元素添加class的方法來實現。code
方法二：@media -ms-high-contrast
IE10支持媒體查詢，而後也支持-ms-high-contrast這個屬性，因此，咱們能夠用它來hack ie10：orm
if (window.matchMedia(
"screen and (-ms-high-contrast: active), (-ms-high-contrast: none)"
).matches) {
document.documentElement.className +=
"ie10"
;
}
|
這種寫法能夠適配到高對比度和默認模式。因此能夠覆蓋到全部ie10的模式了。htm
而後這種方式可能也會在後面的IE11中生效。ip
固然，方法二也能夠和方法一一塊兒用：
@media
screen
and (
min-width
:
0
\
0
) {
/* IE9 and IE10 rule sets go here */
}
|
不過，估計後面ie10也會普及到Windows 7平臺，因此ie9會消失，只是看看ie8和ie7的份額，這種狀況可能不會發生吧。。。
1, 選擇符前綴法，即在CSS選擇符前加一些只有特定瀏覽器才能識別的前綴。
*html 前綴只對IE6生效 *+html 前綴只對IE7生效
例如：
.test{
color
:
#FFF
;}
*html .test{
color
:
#000
;}
/* only for ie6 */
*+html .test{
color
:
#CCC
;}
/* only for ie7 */
|
2, 屬性前綴法，即在樣式屬性名前加一些只有特定瀏覽器才能識別的前綴。
「-」 只對IE6生效
「*」 只對IE6和IE7生效
例如：
.test{
color
:
#FFF
; *
color
:
#CCC
; -
color
:
#000
;}
|
3, 還有一種hack方法是在屬性值後加上一些只有特定瀏覽器才能識別的前綴。
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「″ IE8/IE9/IE10都生效
「\9″ 只對IE9/IE10生效
例如：
.test{
color
:
#FFF
;
color
:
#CCC
\
9
;
color
:
#3FC
\
0
;}
|
文章內容整理自：http://www.impressivewebs.com/ie10-css-hacks/ http://www.ifrans.cn/css-hack/