[HTML] 透過 META 來設置 IE 兼容模式

Screenshot 2016-03-06 12.56.59

這幾年瀏覽器界,IE 已經從主流被 Chrome 跟 Firefox 打到非主流

而現代網頁設計也已經不符合舊時的 IE 所能處理的

IE 有許多詬病,都是大家滿不喜歡以及討厭的,包括:難 debug、Chrome上是好的在 IE 跑就大跑版 …

曾幾何時有不少工程師為了 IE 上的 WEB 呈現因此熬夜 XD

一直來我都沒有一個很棒的解法來解決 IE 上許多問體

為了支援 IE 在 <head> 中可以加上這段程式碼,以成了所有 WEB 開發者每次都會加上的

但即使加了這兩行

仍然會跑版啊!!

直到我發現了 X-UA-Compatible 這個 meta tag

微軟自從 IE 8 之後 就推出了這個功能

可以讓 IE 模擬不同版本的 IE、Edge 甚至是強制IE 使用Chrome Frame

以下是我實際遇到的

我用 bootstrap + 一些Javascript排出來的一個 page

用 IE 11 打開,沒加 X-UA-Compatible 這個 meta 前是長這樣

before

加上 meta tag 在 <head>中, 之後世界就變了….

after

基本上 X-UA-Compatible 就是一個模擬瀏覽器的概念

使用者的電腦也要有 edge (windows 10之後), chrome 才能模擬

這方法是眾多解決 IE 問題之一

一樣治標不治本,只有微軟要出來弄好 ie 世界才有可能更美好 T_T

不過用 IE 的人已經越來越少

X-UA-Compatible 可以來避免使用者不小心用 IE 開網頁造成的跑版問題

 

我恨 IE

 

ref: http://stackoverflow.com/questions/14611264/x-ua-compatible-content-ie-9-ie-8-ie-7-ie-edge

 

Leave a Reply