IE10、IE11和Microsoft Edge的Hack

IE10、IE11和Microsoft Edge的Hack

随着Win10的推广，Microsoft Edge浏览器已经越来越普遍，但是IE11也是伴随其中，尾大不掉。

首先，了解一下概念，如下图：微软Edge浏览器和EdgeHTML是两种不同的东西。Edge是一款浏览器，而EdgeHTML是渲染引擎，用于处理和渲染网页元素。既然二者有本质区别，他们的更新版本也就完全不同。如果有网站依赖于引擎版本号，而非浏览器版本，就可能引起网站错误。

下面就介绍一下IE10、IE11和Microsoft Edge的Hack的大全：

CSS-Hack for Microsoft Edge Browser 12+

@supports (-ms-accelerator:true) {

  .selector { property:value; }

}

CSS-Hack for Microsoft Edge Browser 12+

_:-ms-lang(x),

_::-webkit-meter-bar,

.selector {

    property:value;

}

CSS-Hack for Microsoft Edge Browser 12+

_:-ms-lang(x),

_:-webkit-full-screen,

.selector {

    property: value;

}

CSS-Hack for Microsoft Edge Browser 12 only

@supports (-ms-accelerator:true) and (not (color:unset)) {

  .selector { property:value; }

}

CSS-Hack for Microsoft Edge Browser 13+

@supports (-ms-accelerator:true) and (color:unset) {

  .selector { property:value; }

}

CSS-Hack for Microsoft Edge Browser 13+

_:-ms-lang(x),

_::-webkit-meter-bar,

.selector {

    property:value;

}

CSS-Hack for Internet Explorer 11+（IE11、Edge）

@charset "<Any Modern Browser but MSIE 10- or FF 18- >";

_:-ms-lang(x), .selector { property:value; }

CSS-Hack for Internet Explorer 11 only

_:-ms-fullscreen,

:root .selector {

    property: value;

}

CSS-Hack for Internet Explorer 10+（IE10、IE11、Edge）

_:-ms-lang(x),

.selector {

    property: value;

}

CSS-Hack for Internet Explorer 10 only

_:-ms-lang(x),

.selector {

    property: value9;

}

CSS-Hack for Internet Explorer 9+（IE9、IE10、IE11）

_::selection,

.selector {

    property: value;

}

CSS-Hack for Internet Explorer 8+（IE9、IE10、IE11）

@media screen {

    .selector {

        property: value;

    }

}

Any non-Microsoft modern browsers (Safari 9+, Chrome 28+, Firefox 22+)

@supports (not (-ms-accelerator:true)) {

　　 .selector {

　　　　property:value;

　　}

}