Bootstrap 與 IE 兼容模式 關係講解

IE 兼容模式
Bootstrap 不支持 IE 古老的兼容模式。爲了讓 IE 瀏覽器運行最新的渲染模式下，建議將此 <meta> 標籤加入到你的頁面中：
Copy

<meta http-equiv="X-UA-Compatible" content="IE=edge">

按 F12 鍵打開 IE 的調試工具，就能夠看到 IE 當前的渲染模式是什麼。

此 meta 標籤被包含在了全部 Bootstrap 文檔和實例頁面中，爲的就是在每一個被支持的 IE 版本中擁有最好的繪製效果。

請參考 這個發表在 StackOverflow 上的問題。
國產瀏覽器高速模式

國內瀏覽器廠商通常都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，全部國產瀏覽器都是默認使用兼容模式，這就形成因爲低版本 IE （IE8 及如下）內核讓基於 Bootstrap 構建的網站展示效果很糟糕的狀況。幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所做爲了！

將下面的 <meta> 標籤加入到頁面中，可讓部分國產瀏覽器默認採用高速模式渲染頁面：
Copy

<meta name="renderer" content="webkit">

目前只有360瀏覽器支持此 <meta> 標籤。但願更多國內瀏覽器儘快採起行動、儘快進入高速時代！
Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 並無對 屏幕的寬度 和 視口（viewport）的寬度 進行區分，這就致使 Bootstrap 中的媒體查詢並不能很好的發揮做用。爲了解決這個問題，你能夠引入下面列出的這段 CSS 代碼暫時修復此問題：
Copy

@-ms-viewport { width: device-width; }

然而，這樣作並不能對 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本以前的設備起做用，因爲這樣作將致使 Windows Phone 8 設備按照桌面瀏覽器的方式呈現頁面，而不是較窄的「手機」呈現方式，爲了解決這個問題，還須要加入如下 CSS 和 JavaScript 代碼來化解此問題。
Copy

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

Copy

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTExtNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}

請查看 Windows Phone 8 and Device-Width 以瞭解更多信息。

做爲提醒，咱們將上面的代碼加入到了全部 Bootstrap 文檔和實例頁面中。