IE十、IE11和Microsoft Edge的Hack

IE十、IE11和Microsoft Edge的Hack

隨着Win10的推廣，Microsoft Edge瀏覽器已經愈來愈廣泛，可是IE11也是伴隨其中，尾大不掉。

首先，瞭解一下概念，以下圖：微軟Edge瀏覽器和EdgeHTML是兩種不一樣的東西。Edge是一款瀏覽器，而EdgeHTML是渲染引擎，用於處理和渲染網頁元素。既然兩者有本質區別，他們的更新版本也就徹底不一樣。若是有網站依賴於引擎版本號，而非瀏覽器版本，就可能引發網站錯誤。

下面就介紹一下IE十、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+（IE十一、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+（IE十、IE十一、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+（IE九、IE十、IE11）

_::selection,
.selector {
    property: value;
}

CSS-Hack for Internet Explorer 8+（IE九、IE十、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;

　　}

}