鍍金池/ 教程/ HTML/ 瀏覽器和設(shè)備的支持情況
警告框
標(biāo)簽頁(yè)
代碼
輪播
進(jìn)度條
輔助類(lèi)
按鈕組
社區(qū)
標(biāo)簽
導(dǎo)航
響應(yīng)式工具
禁止響應(yīng)式布局
工具提示
概覽
媒體對(duì)象
概覽
具有響應(yīng)式特性的嵌入內(nèi)容
Well
折疊
下載
對(duì)第三方組件的支持
Glyphicons 字體圖標(biāo)
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設(shè)備的支持情況
輸入框組
表格
滾動(dòng)監(jiān)聽(tīng)
下拉菜單
排版
巨幕
按鈕
頁(yè)頭
使用 Sass
包含的內(nèi)容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導(dǎo)航
分頁(yè)
導(dǎo)航條
警告框
過(guò)渡效果
從 v2.x 版本升級(jí)到 v3.x 版本
工具
可訪問(wèn)性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

瀏覽器和設(shè)備的支持情況

Bootstrap 的目標(biāo)是在最新的桌面和移動(dòng)瀏覽器上有最佳的表現(xiàn)，也就是說(shuō)，在較老舊的瀏覽器上可能會(huì)導(dǎo)致某些組件表現(xiàn)出的樣式有些不同，但是功能是完整的。

被支持的瀏覽器

特別注意，我們堅(jiān)決支持這些瀏覽器的最新版本。在 Windows 平臺(tái)，我們支持 Internet Explorer 8-11。請(qǐng)看下面列出的詳細(xì)信息。

Chrome Firefox Internet Explorer Opera Safari
Android 支持 支持 N/A 不支持 N/A
iOS 支持 N/A 不支持 支持
Mac OS X 支持 支持 支持 支持
Windows 支持 支持 支持 支持 不支持

Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表現(xiàn)也是很不錯(cuò)的，雖然我們不對(duì)其進(jìn)行官方支持。

瀏覽器 bug 列表中列出了影響 Bootstrap 正常功能的瀏覽器 bug。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多 CSS3 屬性和 HTML5 元素 -- 例如，圓角矩形和投影 -- 是肯定不被支持的。另外， Internet Explorer 8 需要 Respond.js 配合才能實(shí)現(xiàn)對(duì)媒體查詢(xún)（media query）的支持。

Feature Internet Explorer 8 Internet Explorer 9
border-radius 不支持 支持
box-shadow 不支持 支持
transform 不支持 支持, with -ms prefix
transition 不支持
placeholder 不支持

Internet Explorer 8 與 Respond.js

在開(kāi)發(fā)環(huán)境和生產(chǎn)（線上）環(huán)境需要支持 Internet Explorer 8 時(shí)，請(qǐng)務(wù)必注意下面給出的警告。

Respond.js 與 跨域（cross-domain） CSS 的問(wèn)題

如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）時(shí)需要一些額外的設(shè)置。請(qǐng)參考 RRespond.js 文檔 獲取詳細(xì)信息。

Respond.js 與 file:// 協(xié)議

由于瀏覽器的安全機(jī)制，Respond.js 不能在通過(guò) file:// 協(xié)議（打開(kāi)本地HTML文件所用的協(xié)議）訪問(wèn)的頁(yè)面上發(fā)揮正常的功能。如果需要測(cè)試 IE8 下面的響應(yīng)式特性，務(wù)必通過(guò) http 協(xié)議訪問(wèn)頁(yè)面（例如搭建 apache、nginx 等）。請(qǐng)參考 RRespond.js 文檔獲取更多信息。

Respond.js 與 @import 指令

Respond.js 不支持通過(guò) @import 指令所引入的 CSS 文件。例如，Drupal 一般被配置為通過(guò) @import 指令引入CSS文件，Respond.js 對(duì)其將無(wú)法起到作用。請(qǐng)參考 Respond.js 文檔獲取更多信息。

Internet Explorer 8 與 box-sizing 屬性

當(dāng) box-sizing: border-box; 與 min-width、max-width、min-height 或 max-height 一同使用時(shí)，IE8 不能完全支持 box-sizing 屬相。由于此原因，從 Bootstrap v3.0.1 版本開(kāi)始，我們不再為 .container 賦予 max-width 屬性。

Internet Explorer 8 與 @font-face

當(dāng) @font-face 與 :before 在 IE8 下共同使用時(shí)會(huì)出現(xiàn)問(wèn)題。由于 Bootstrap 對(duì) Glyphicons 的樣式設(shè)置使用了這一組合方式，如果某個(gè)頁(yè)面被瀏覽器緩存了，并且此頁(yè)面不是通過(guò)點(diǎn)擊“刷新”按鈕或通過(guò) iframe 加載的，那么就會(huì)導(dǎo)致字體文件尚未加載的情況下就開(kāi)始繪制此頁(yè)面。當(dāng)鼠標(biāo)滑過(guò)頁(yè)面（body）時(shí)，頁(yè)面上的某些圖標(biāo)就會(huì)顯現(xiàn)，鼠標(biāo)滑過(guò)其他沒(méi)有顯現(xiàn)的圖標(biāo)時(shí)，這些圖標(biāo)就能顯示出來(lái)了。請(qǐng)參考 issue #13863 了解詳細(xì)信息。

IE 兼容模式

Bootstrap 不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運(yùn)行最新的渲染模式下，建議將此 <meta>標(biāo)簽加入到你的頁(yè)面中：

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

按 F12鍵打開(kāi) IE 的調(diào)試工具，就可以看到 IE 當(dāng)前的渲染模式是什么。

此 meta 標(biāo)簽被包含在了所有 Bootstrap 文檔和實(shí)例頁(yè)面中，為的就是在每個(gè)被支持的 IE 版本中擁有最好的繪制效果。

請(qǐng)參考 這個(gè)發(fā)表在 StackOverflow 上的問(wèn)題。

國(guó)產(chǎn)瀏覽器高速模式

國(guó)內(nèi)瀏覽器廠商一般都支持兼容模式（即 IE 內(nèi)核）和高速模式（即 webkit 內(nèi)核），不幸的是，所有國(guó)產(chǎn)瀏覽器都是默認(rèn)使用兼容模式，這就造成由于低版本 IE （IE8 及以下）內(nèi)核讓基于 Bootstrap 構(gòu)建的網(wǎng)站展現(xiàn)效果很糟糕的情況。幸運(yùn)的是，國(guó)內(nèi)瀏覽器廠商逐漸意識(shí)到了這一點(diǎn)，某些廠商已經(jīng)開(kāi)始有所作為了！

將下面的 <meta> 標(biāo)簽加入到頁(yè)面中，可以讓部分國(guó)產(chǎn)瀏覽器默認(rèn)采用高速模式渲染頁(yè)面：

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

目前只有360瀏覽器支持此<meta>標(biāo)簽。希望更多國(guó)內(nèi)瀏覽器盡快采取行動(dòng)、盡快進(jìn)入高速時(shí)代！

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 并沒(méi)有對(duì) 屏幕的寬度 和 視口（viewport）的寬度 進(jìn)行區(qū)分，這就導(dǎo)致 Bootstrap 中的媒體查詢(xún)并不能很好的發(fā)揮作用。為了解決這個(gè)問(wèn)題，你可以引入下面列出的這段 CSS 代碼暫時(shí)修復(fù)此問(wèn)題：

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

然而，這樣做并不能對(duì) Windows Phone 8 Update 3 (a.k.a. GDR3) 版本之前的設(shè)備起作用，由于這樣做將導(dǎo)致 Windows Phone 8 設(shè)備按照桌面瀏覽器的方式呈現(xiàn)頁(yè)面，而不是較窄的“手機(jī)”呈現(xiàn)方式，為了解決這個(gè)問(wèn)題，還需要加入以下 CSS 和 JavaScript 代碼來(lái)化解此問(wèn)題。

    @-webkit-viewport   { width: device-width; }
    @-moz-viewport      { width: device-width; }
    @-ms-viewport       { width: device-width; }
    @-o-viewport        { width: device-width; }
    @viewport           { width: device-width; }
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)
    }

請(qǐng)查看 Windows Phone 8 and Device-Width 以了解更多信息。

作為提醒，我們將上面的代碼加入到了所有 Bootstrap 文檔和實(shí)例頁(yè)面中。

Safari 對(duì)百分比數(shù)字湊整的問(wèn)題

OS X 上搭載的 v7.1 以前 Safari 和 iOS v8.0 上搭載的 Safari 瀏覽器的繪制引擎對(duì)于處理 .col-*-1類(lèi)所對(duì)應(yīng)的很長(zhǎng)的百分比小數(shù)存在 bug。也就是說(shuō)，如果你在一行（row）之中定義了12個(gè)單獨(dú)的列（.col-*-1），你就會(huì)看到這一行比其他行要短一些。除了升級(jí) Safari/iOS 外，有以下幾種方式來(lái)應(yīng)對(duì)此問(wèn)題：

為最后一列添加 .pull-right 類(lèi)，將其暴力向右對(duì)齊

手動(dòng)調(diào)整百分比數(shù)字，讓其針對(duì) Safari 表現(xiàn)更好（這比第一種方式更困難）

模態(tài)框、導(dǎo)航條和虛擬鍵盤(pán)

Overflow and scrolling

<body> 元素在 iOS 和 Android 上對(duì) overflow: hidden 的支持很有限。結(jié)果就是，在這兩種設(shè)備上的瀏覽器中，當(dāng)你滾動(dòng)屏幕超過(guò)模態(tài)框的頂部或底部時(shí)，<body> 中的內(nèi)容將開(kāi)始隨著滾動(dòng)。

虛擬鍵盤(pán)

還有，如果你正在使用 fixed 定位的導(dǎo)航條或在模態(tài)框上面使用輸入框，還會(huì)遇到 iOS 在頁(yè)面繪制上的 bug，當(dāng)觸發(fā)虛擬鍵盤(pán)之后，其不會(huì)更新 fixed 定位的元素的位置。這里有幾種解決方案，包括將 fixed 定位轉(zhuǎn)變?yōu)?position: absolute 定位，或者啟動(dòng)一個(gè)定時(shí)器手工修正組件的位置。這些沒(méi)有加入 Bootstrap 中，因此，需要由你自己選擇最好的解決方案并加入到你的應(yīng)用中。

導(dǎo)航條上的下拉菜單

在 iOS 設(shè)備上，由于導(dǎo)航組件（nav）的復(fù)雜的 z-indexing 屬性，.dropdown-backdrop 元素并未被使用。因此，為了關(guān)閉導(dǎo)航條上的下拉菜單，必須直接點(diǎn)擊下拉菜單上的元素（或者任何其他能夠觸發(fā) iOS 上 click 事件的元素）。

瀏覽器的縮放功能

頁(yè)面縮放功能不可避免的會(huì)將某些組件搞得亂七八糟，不光是 Bootstrap ，整個(gè)互聯(lián)網(wǎng)上的所有頁(yè)面都是這樣。針對(duì)具體問(wèn)題，我們或許可以修復(fù)它（如果有必要的話，請(qǐng)先搜索一下你的問(wèn)題，看看是否已有解決方案，然后在向我們提交 issue）。然而，我們更傾向于忽略這些問(wèn)題，由于這些問(wèn)題除了一些 hack 手段，一般沒(méi)有直接的解決方案。

打印

即便是在某些很現(xiàn)代的瀏覽器中，打印頁(yè)面功能也還是存在很多陷阱。

舉個(gè)例子，從 Chrome v32 開(kāi)始，打印一個(gè)支持媒體查詢(xún)的頁(yè)面時(shí)，不管如何設(shè)置留白，Chrome 總是使用一個(gè)遠(yuǎn)遠(yuǎn)小于實(shí)際頁(yè)面尺寸的視口寬度的值作為頁(yè)面寬度。這就導(dǎo)致被打印的頁(yè)面總是被呈現(xiàn)為在超小屏幕（extra-small）上的效果（也就是激活了 Bootstrap 針對(duì)超小屏幕的柵格排布方式）。 參考 #12078 了解更多信息。 推薦解決方案：

  • 讓你的頁(yè)面在超?。╡xtra-small）屏幕上看起來(lái)不那么太差勁。
  • 修改 @screen-* Less 變量的值，讓你的頁(yè)面總是大于 extra-small
  • 添加額外的媒體查詢(xún)代碼，針對(duì)打印機(jī)修改柵格閾值。

另外，從 Safari v8.0 開(kāi)始，固定寬度的 .container 會(huì)導(dǎo)致 Safari 使用非常小的字號(hào)來(lái)打印頁(yè)面。參見(jiàn) #14868了解跟多信息。下面這段 CSS 代碼提供了一個(gè)臨時(shí)解決方案：

    @media print {
      .container {
        width: auto;
      }
    }

Android 系統(tǒng)默認(rèn)瀏覽器

Android 4.1 （甚至某些較新版本）系統(tǒng)的默認(rèn)瀏覽器被設(shè)置為默認(rèn)打開(kāi)頁(yè)面的應(yīng)用程序（不同于 Chrome）。不幸的是， 一般情況下，這些瀏覽器有很多 bug 以及和 CSS 標(biāo)準(zhǔn)不一致的地方。

選項(xiàng)菜單

如果 <select> 元素應(yīng)用了 border-radius 和/或 border 樣式，Android 系統(tǒng)默認(rèn)的瀏覽器將不會(huì)顯示側(cè)邊欄控件。 使用下面的代碼片段來(lái)刪除有問(wèn)題的 CSS 并且在Android 系統(tǒng)默認(rèn)的瀏覽器上，<select> as an 呈現(xiàn)為無(wú)樣式元素?？梢酝ㄟ^(guò)檢測(cè)用戶(hù)代理（user agent）的特征串來(lái)避免干擾 Chrome、Safari 和 Mozilla 瀏覽器。

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

見(jiàn) JS Bin 上的 demo。

W3C 頁(yè)面源碼校驗(yàn)

為了在老舊的瀏覽器上盡量提供最好的展現(xiàn)，Bootstrap 針對(duì)瀏覽器使用了一些 CSS hack 手段，為的是針對(duì)特定瀏覽器版本彌補(bǔ)瀏覽器自身的 bug。這些 CSS hack 手段在 CSS 校驗(yàn)器那里會(huì)被認(rèn)為是無(wú)效代碼。還有一些地方，我們使用了某些未被完全標(biāo)準(zhǔn)化的 CSS 特性，純粹是為了實(shí)現(xiàn)漸進(jìn)式增強(qiáng)的思路。

上面提到的這些校驗(yàn)器報(bào)告的警告信息并不會(huì)對(duì)實(shí)際使用造成影響，因?yàn)榉?hack 部分的 CSS 是完全合格的，hack 部分不會(huì)對(duì)非 hack 部分的功能產(chǎn)生影響，這就是我們故意無(wú)視這些校驗(yàn)器警告的原因。

同樣，我們的 HTML 文檔中也有一些針對(duì) Firefox bug 的 hack 代碼，在 HTML 校驗(yàn)時(shí)也會(huì)被警告。

上一篇：按鈕組下一篇：使用 Sass