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