跳到主要內容

IE10、IE11和Microsoft Edge的Hack(IE已下台一鞠躬,此Hack已經不需要了,灑花!!)

最新補充:
微軟已停止IE系列的更新,意味著IE走入歷史囉!
之後就不會再需要設定這個 Hack。
如果你的客戶仍在使用 IE,請大力洗腦客戶:該升級囉~~該升級囉~~
升級不止是能看到更美觀的畫面,網頁安全性也會提高,你看到的美美網頁都是使用 JavaScript 與 CSS 來製作。不升級未來就只能看 "史萊姆的第一個家" 這種網站了(更不要說平版和手機) 

隨著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;
  }
}