免費AI編程助手
Bootstrap4 瀏覽器支持
Bootstrap4支持多種瀏覽器和設(shè)備，不管是最新的還是一些較早的瀏覽器，都支持。具體支持哪一些，請看下面內(nèi)容。
支持的瀏覽器
Bootstrap4 支持所有的主流瀏覽器和平臺的最新的、穩(wěn)定的版本。
移動設(shè)備
總的來說，Bootstrap支持所有主流平臺的最新版本的默認瀏覽器。
| Chrome | Firefox | Opera | Safari | Android Browser & WebView | |
|---|---|---|---|---|---|
| Android | 支持 | 支持 | 不支持 | N/A | Android v5.0+ 支持 |
| iOS | 支持 | N/A | 不支持 | 支持 | N/A |
桌面瀏覽器
差不多的，大多數(shù)最新版本的桌面瀏覽器也是支持的。
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | 支持 | 支持 | N/A | N/A | 支持 | 支持 |
| Windows | 支持 | 支持 | 支持 | 支持 | 支持 | 不支持 |
對于 Firefox, 除了最新的普通穩(wěn)定版本, 我們也支持Firefox瀏覽器最新的擴展支持版本 (ESR)。
非正式地，Bootstrap應(yīng)當(dāng)在Chromium系統(tǒng)以及Linux系統(tǒng)的Chrome、Linux系統(tǒng)的Firefox以及Internet Explorer 8或更早版本的IE中也表現(xiàn)良好。雖然它們不是正式支持的。
Internet Explorer 9
Internet Explorer 9也是支持的。然而，有一些CSS3屬性和HTML5元素在Bootstrap中不被完全支持，如下表：
| 功能 | 狀態(tài) |
|---|---|
border-radius圓角邊框 |
支持 |
box-shadow盒陰影 |
支持 |
transform變形 |
支持, 帶-ms前綴 |
transition過渡 |
不支持 |
placeholder占位符 |
不支持 |
訪問Can I use…獲取更多關(guān)于 CSS3 和 HTML5 支持的信息。
Internet Explorer 8
需要注意，從Bootstrap4開始，就不在支持IE8了，如果你需要IE8支持，我們建議你使用Bootstrap 3。
當(dāng)然，作為替代，你可以添加一些第三方的JavaScript來恢復(fù)Bootstrap 4對Internet Explorer 8的支持。你需要下面這些東西：
IE兼容模式
Bootstrap 在老版本的Internet Explorer兼容模式中不受支持。為了確保你正在使用IE的最新的渲染模式，請在你的網(wǎng)頁的合適位置放置下面這個<meta>標(biāo)簽：
<meta http-equiv="X-UA-Compatible" content="IE=edge">要想打開調(diào)試工具以確認文檔模式，請按F12并檢查“文檔模式”。
所有的Bootstrap的文檔和示例都包含了這個標(biāo)簽，以確保在每個版本的IE瀏覽器（Bootstrap支持的IE版本）中，都能得到最好的渲染可能性。
模態(tài)窗口，導(dǎo)航條，以及虛擬鍵盤
溢出和滾動
iOS和安卓對<body>元素中使用overflow: hidden的支持很有限。因此，在這兩種設(shè)備的瀏覽器中，當(dāng)你滾動超過一個模態(tài)窗口的頂部或底部，<body>內(nèi)容就會開始滾動。
虛擬鍵盤
同時，注意如果你正在使用一個固定導(dǎo)航欄或者在模態(tài)窗口中使用輸入法，iOS有一個渲染bug，即當(dāng)觸發(fā)彈出虛擬鍵盤時，它不會更新固定元素的位置。對這個問題的一點變通包括把你的元素轉(zhuǎn)換到position: absolute;，包括激發(fā)一個焦點計時器來手工修正位置。這個不歸Bootstrap處理的，所以你的應(yīng)用程序如有這個問題采取何種解決方法取決于你自己。
導(dǎo)航欄下拉菜單
在iOS中，導(dǎo)航欄上不能使用.dropdown-backdrop元素，因為z-indexing的復(fù)雜性。因此，關(guān)閉導(dǎo)航欄的下拉菜單，你必須直接點擊下拉菜單元素（或者 iOS 中任何其他可以啟動單擊事件的元素)。
瀏覽器縮放
頁面縮放不可避免地影響一些組件的渲染效果, 無論是在Bootstrap網(wǎng)頁還是在其它網(wǎng)頁中。對于這個問題，我們可能能夠修復(fù)它（發(fā)起話題前，如果可以的話請先搜索一下）。然而，我們傾向于忽視它們，因為它們大多數(shù)沒有直接的解決辦法，或者不太容易解決。
移動設(shè)備上的:hover/:focus粘性
即使在大多數(shù)觸摸屏上，真正的懸停不可能實現(xiàn)，大多數(shù)移動瀏覽器模仿?？h并使得:hover“有粘性”。換句話說，在觸擊一個元素之后，:hover樣式樣式開始應(yīng)用，在用戶觸擊另一個元素之后停止應(yīng)用。在移動優(yōu)先的網(wǎng)站上，這種表現(xiàn)通常是不可取的。
Bootstrap包含了針對它的一個變通，雖然它默認是不可用的。從Sass編譯時只要把$use-hover-media-query設(shè)置為true，為了瀏覽器中禁用用以模擬懸停的:hover樣式，Bootstrap將使用mq4-hover-shim，它能防止粘性的:hover樣式。
安卓內(nèi)置瀏覽器
除了盒子，Android 4.1（以及更新的版本）使用Browser應(yīng)用作為默認瀏覽器（而不是用Chrome）。很不幸的是，該Browser應(yīng)用有很多的bug以及CSS不一致。
選項菜單
在<select>元素中，如果不應(yīng)用border-radius以及border，安卓內(nèi)置瀏覽器不會顯示邊緣控件。（請閱讀 this StackOverflow question 以了解更多詳情。）使用下面的代碼片段可以在安卓內(nèi)置瀏覽器中移除這個CSS沖突，并把該<select>渲染成未樣式化的元素。該用戶代理嗅覺探避免了與干擾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>驗證器
為了能夠向漏洞百出的老版本的瀏覽器提供盡可能好的體驗，Bootstrap在多個不同的地方使用了 CSS 瀏覽器hacks 使用針對對于特定的瀏覽器版本的特殊的CSS，以克服瀏覽器自身存在的bug。這些hacks自然是引起了CSS驗證器申明它們是不可用的。在一些地方，我們也使用尚未完全標(biāo)準(zhǔn)化的前沿CSS特征，但是使用它們純粹是為了漸進增強。
這些驗證器的警告在實踐中沒生產(chǎn)妨礙，因為我們的CSS的非hacky部分已經(jīng)充分驗證，而且用到的hacky部分不會妨礙非hacky部分的正常功能。因此這就是我們故意忽視特定的警告的原因。
更多建議：