瀏覽器和設備
了解 Bootstrap 支持的從現代到舊的瀏覽器和設備,包括每個已知的怪癖和錯誤。
支持的瀏覽器
Bootstrap 支持所有主流瀏覽器和平台的最新穩定版本。在 Windows 上,我們支持 Internet Explorer 10-11 / Microsoft Edge。
不明確支持使用最新版本的 WebKit、Blink 或 Gecko 的替代瀏覽器,無論是直接還是通過平台的 Web 視圖 API。但是,Bootstrap 應該(在大多數情況下)在這些瀏覽器中也能正確顯示和運行。下面提供了更具體的支持信息。
您可以在我們.browserslistrc file
的以下位置找到我們支持的瀏覽器範圍及其版本:
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
我們使用Autoprefixer通過 CSS 前綴處理預期的瀏覽器支持,它使用Browserslist來管理這些瀏覽器版本。請查閱他們的文檔以了解如何將這些工具集成到您的項目中。
移動設備
一般來說,Bootstrap 支持各大平台默認瀏覽器的最新版本。請注意,不支持代理瀏覽器(例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk)。
鉻合金 | 火狐 | 蘋果瀏覽器 | Android 瀏覽器和 Web 視圖 | 微軟邊緣 | |
---|---|---|---|---|---|
安卓 | 支持的 | 支持的 | 不適用 | 支持安卓 v5.0+ | 支持的 |
iOS | 支持的 | 支持的 | 支持的 | 不適用 | 支持的 |
Windows 10 移動版 | 不適用 | 不適用 | 不適用 | 不適用 | 支持的 |
桌面瀏覽器
同樣,支持大多數桌面瀏覽器的最新版本。
鉻合金 | 火狐 | IE瀏覽器 | 微軟邊緣 | 歌劇 | 蘋果瀏覽器 | |
---|---|---|---|---|---|---|
蘋果電腦 | 支持的 | 支持的 | 不適用 | 支持的 | 支持的 | 支持的 |
視窗 | 支持的 | 支持的 | 支持,IE10+ | 支持的 | 支持的 | 不支持 |
對於 Firefox,除了最新的正常穩定版本外,我們還支持最新的擴展支持版本 (ESR)版本的 Firefox。
非官方的,Bootstrap 在 Chromium 和 Chrome for Linux、Firefox for Linux 和 Internet Explorer 9 中的外觀和行為應該足夠好,儘管它們不受官方支持。
有關 Bootstrap 必須解決的一些瀏覽器錯誤的列表,請參閱我們的瀏覽器錯誤牆。
IE瀏覽器
支持 Internet Explorer 10+;IE9及以下沒有。請注意,IE10 不完全支持某些 CSS3 屬性和 HTML5 元素,或者需要前綴屬性才能獲得完整功能。訪問Can I use...了解有關瀏覽器對 CSS3 和 HTML5 功能的支持的詳細信息。如果您需要 IE8-9 支持,請使用 Bootstrap 3。
移動設備上的模態和下拉菜單
溢出和滾動
overflow: hidden;
在 iOS 和 Android 中,對元素的支持<body>
非常有限。為此,當您在任一設備的瀏覽器中滾動超過模式的頂部或底部時,<body>
內容將開始滾動。請參閱Chrome 錯誤 #175502(在 Chrome v40 中修復)和WebKit 錯誤 #153852。
iOS 文本字段和滾動
從 iOS 9.2 開始,當 modal 打開時,如果滾動手勢的初始觸摸在 textual<input>
或 a的邊界內<textarea>
,則將滾動 modal 下面的<body>
內容而不是 modal 本身。請參閱WebKit 錯誤 #153856。
導航欄下拉菜單
由於 z-indexing 的複雜性,該.dropdown-backdrop
元素未在 iOS 上的導航中使用。因此,要關閉導航欄中的下拉菜單,您必須直接單擊下拉元素(或任何其他會在 iOS 中觸發單擊事件的元素)。
瀏覽器縮放
頁面縮放不可避免地會在某些組件中呈現渲染偽影,無論是在 Bootstrap 中還是在 Web 的其餘部分中。根據問題,我們可能能夠修復它(先搜索,然後在需要時打開問題)。然而,我們傾向於忽略這些,因為除了 hacky 變通方法之外,它們通常沒有直接的解決方案。
粘性:hover
/:focus
在 iOS 上
雖然:hover
在大多數觸控設備上是不可能的,但 iOS 會模擬這種行為,從而導致在點擊一個元素後持續存在的“粘性”懸停樣式。只有當用戶點擊另一個元素時,這些懸停樣式才會被刪除。這種行為在很大程度上被認為是不可取的,並且在 Android 或 Windows 設備上似乎不是問題。
在我們的 v4 alpha 和 beta 版本中,我們包含了用於選擇媒體查詢填充程序的不完整和註釋掉的代碼,該填充程序將禁用模擬懸停的觸摸設備瀏覽器中的懸停樣式。這項工作從未完全完成或啟用,但為了避免完全損壞,我們選擇棄用此 shim並將 mixin 作為偽類的快捷方式。
印刷
即使在一些現代瀏覽器中,打印也可能很古怪。
從 Safari v8.0 開始,使用固定寬度.container
類會導致 Safari 在打印時使用異常小的字體大小。有關詳細信息,請參閱問題 #14868和WebKit 錯誤 #138192。一種潛在的解決方法是以下 CSS:
@media print {
.container {
width: auto;
}
}
安卓股票瀏覽器
開箱即用,Android 4.1(甚至顯然是一些較新的版本)附帶了瀏覽器應用程序作為默認的網絡瀏覽器選擇(而不是 Chrome)。不幸的是,瀏覽器應用程序通常有很多錯誤和與 CSS 不一致的地方。
選擇菜單
在<select>
元素上,如果應用了border-radius
和/或,Android 股票瀏覽器將不會顯示側面控件border
。(有關詳細信息,請參閱此 StackOverflow 問題。)使用下面的代碼片段刪除有問題的 CSS 並將其呈現<select>
為 Android 股票瀏覽器上的無樣式元素。用戶代理嗅探可避免干擾 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>
想看一個例子嗎?看看這個 JS Bin 演示。
驗證器
為了給舊的和有問題的瀏覽器提供盡可能好的體驗,Bootstrap 在幾個地方使用CSS 瀏覽器 hack將特殊的 CSS 定位到某些瀏覽器版本,以解決瀏覽器本身的錯誤。這些 hack 可以理解地導致 CSS 驗證器抱怨它們是無效的。在一些地方,我們還使用了尚未完全標準化的前沿 CSS 功能,但這些功能純粹用於漸進增強。
這些驗證警告在實踐中並不重要,因為我們的 CSS 的非 hacky 部分確實完全驗證並且 hacky 部分不會干擾非 hacky 部分的正常運行,因此我們故意忽略這些特定警告。
由於我們包含了針對某個 Firefox 錯誤的解決方法,我們的 HTML 文檔同樣有一些瑣碎和無關緊要的 HTML 驗證警告。