了解 Bootstrap4 在各个浏览器和设备上的表现,这包含一些已知的奇怪问题。
Bootstrap 支持所有主流浏览器和平台的最新,稳定版本。 在 Windows 上,支持 Internet Explorer 10-11 / Microsoft Edge 。
由于浏览器日新月异,大部分最新版本浏览器的内核可能无法确定提供一致的表现。不过 Boostrap 应该不会让你失望。
你可以在 package.json
找到我们支持的浏览器及其版本
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
我们使用 Autoprefixer 通过 CSS 前缀处理预期的浏览器支持,CSS 前缀使用浏览器列表来管理这些浏览器版本。 有关如何将这些工具集成到项目中的信息,请参阅其文档。
一般来说,Bootstrap 支持每个主要平台的默认浏览器的最新版本。 请注意,不支持代理浏览器(如 Opera Mini,Opera Mobile 的 Turbo 模式,UC Browser Mini,Amazon Silk)。
Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
---|---|---|---|---|---|
Android | 支持 | 支持 | 不存在 | Android v5.0+ 支持 | 支持 |
iOS | 支持 | 支持 | 支持 | 不存在 | 支持 |
Windows 10 Mobile | 不存在 | 不存在 | 不存在 | 不存在 | 支持 |
同样,支持大多数桌面浏览器的最新版本。
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | 支持 | 支持 | 不存在 | 不存在 | 支持 | 支持 |
Windows | 支持 | 支持 | 支持, IE10+ | 支持 | 支持 | 不支持 |
对于Firefox,除了最新的正常稳定版本,我们还支持最新的扩展支持版本(ESR) Firefox版本。
非正式地,Bootstrap 应该在 Chromium 和 Chrome for Linux,Firefox for Linux 和Internet Explorer 9中看起来和表现得足够好,尽管它们不受官方支持。
支持Internet Explorer 10+; IE9及更老版本不受支持(这意味如果你强行使用可能不会有很好的效果)。 请注意,IE10中不完全支持某些CSS3属性和HTML5元素,或者需要前缀属性才能获得完整功能。 访问 这个网站 ,了解有关CSS3和HTML5功能的浏览器支持的详细信息。
如果你需要IE8-9支持,请使用 Bootstrap 3. 这是我们代码中最稳定的版本,Bootstrap 的团队仍然支持关键错误修正和文档更改。 但是,不会添加任何新功能。
在 iOS 和 Android 中,对< body>
元素的 overflow:hidden;
的支持非常有限。 为此,当你在这些设备的浏览器中滚动浏览模式的顶部或底部时,< body>
内容将开始滚动。 请参阅 Chrome错误#175502 (已在Chrome v40中修复)和 WebKit bug#153852 。
从iOS 9.2开始,当模态(Modal)打开时,如果滚动手势的初始触摸位于文本< input>
或< textarea>
,模式下面的< body>
内容将被滚动而不是模态本身。 请参阅 WebKit错误#153856 。
由于z-indexing的复杂性,导航中的iOS上未使用 .dropdown-backdrop
元素。 因此,要关闭导航栏中的下拉列表,你必须直接单击下拉元素(或任何其他元素 这将触发iOS中的点击事件)。
页面缩放不可避免地在 Bootstrap 和 Web 的其他部分中呈现某些组件中的渲染工件。 根据问题,我们可以修复它(首先搜索,然后在需要时打开问题)。 但是,我们倾向于忽略这些,因为除了变通方法之外,它们通常没有直接的解决方案。
:hover
/:focus
虽然在大多数触摸设备上都无法使用 :hover
,但iOS会模仿此行为,导致“粘性”悬停样式在点击一个元素后仍然存在。 只有当用户点击其他元素时,才会删除这些悬停样式。 这种行为在很大程度上被认为是不受欢迎的,在Android或Windows设备上似乎不是问题。
在我们的v4 alpha和beta版本中,我们包含了用于选择媒体查询填充程序的不完整和注释掉的代码,该代码将禁用模拟悬停的触摸设备浏览器中的悬停样式。 这项工作从未完全完成或启用,但为了避免完全以外情况,我们选择弃用这部分和 将mixins保留为伪类的快捷方式。
即使在一些现代浏览器中,打印也可能很古怪。
从Safari v8.0开始,使用固定宽度的 .container
类会导致Safari在打印时使用非常小的字体大小。 请参阅bug#14868 和 WebKit bug#138192 了解更多详情。 一个可能的解决方法是以下CSS:
@media print {
.container {
width: auto;
}
}
Android 4.1(显然是一些较新的版本)内置了浏览器,作为默认的Web浏览器(与Chrome相反)。 不幸的是,这些内置的浏览器通常有很多错误和CSS的不一致表现。
在 select 元素上,如果应用了 border-radius 或 border,Android 内置浏览器将不会显示侧边控件。使用下面的代码片段删除有问题的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>
想看看例子? 点击这里.
为了向旧的和错误的浏览器提供最佳体验,Bootstrap 在几个地方使用 CSS browser hacks 将特定CSS定位到某些浏览器版本中解决浏览器本身的错误。在一些地方,我们还使用尚未完全标准化的前沿 CSS 功能,但这些功能仅用于渐进增强。
这些验证警告在实践中无关紧要,因为我们 CSS 的非hacky部分确实完全验证并且hacky部分不会干扰非hacky部分的正常运行,因此我们故意忽略这些特定警告。
由于我们包含针对某个Firefox错误的变通方法,因此我们的HTML文档同样具有一些微不足道且无关紧要的HTML验证警告。