浏览器和设备

了解Bootstrap支持的浏览器和设备(从现代到旧),包括每个浏览器和设备的已知问题和错误。

支持的浏览器

Bootstrap支持所有主要浏览器和平台的“最新,稳定版本” 。 在Windows上,我们支持Internet Explorer 10-11 / Microsoft Edge **。

不明确支持直接或通过平台的Web视图API使用最新版本的WebKit,Blink或Gecko的替代浏览器。 但是,Bootstrap也应该(在大多数情况下)在这些浏览器中也能正常显示和运行。 下面提供了更具体的支持信息。

您可以在in our .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前缀处理预期的浏览器支持,CSS前缀使用 Browserslist管理这些浏览器版本。 请查阅他们的文档,以了解如何将这些工具集成到您的项目中。

移动设备

一般来说,Bootstrap支持每个主要平台的默认浏览器的最新版本。 请注意,不支持代理浏览器(例如Opera Mini,Opera Mobile的Turbo模式,UC迷你浏览器,Amazon Silk)。

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

桌面浏览器

同样,支持大多数桌面浏览器的最新版本。

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Supported Supported N/A N/A Supported Supported
Windows Supported Supported Supported, IE10+ Supported Supported Not supported

对于Firefox,除了最新的正常稳定版本外,我们还支持最新的Extended Support Release (ESR) 版本 。

非正式地,Bootstrap在Chromium和Chrome for Linux,Firefox for Linux和Internet Explorer 9中应该看起来和表现良好,尽管它们并没有得到官方支持。

有关Bootstrap必须解决的一些浏览器错误的列表,请参见我们的Wall of browser bugs.

IE浏览器

支持Internet Explorer 10+; IE9和向下不支持。 请注意,某些CSS3属性和HTML5元素在IE10中不完全受支持,或者要求使用前缀属性才能具有全部功能。 访问Can I use… 了解有关浏览器对CSS3和HTML5功能的支持的详细信息。 如果需要IE8-9支持,请使用Bootstrap 3。

手机上的模式和下拉菜单

Overflow and scrolling

在iOS和Android中,对<body>元素上的overflow:hidden;的支持非常有限。 为此,当您在任一设备的浏览器中滚动经过模态的顶部或底部时,<body>内容将开始滚动。 请参阅 Chrome bug #175502 (fixed in Chrome v40) 和 WebKit bug #153852.

iOS text fields and scrolling

从iOS 9.2开始,在模式对话框处于打开状态时,如果滚动手势的初始触摸位于文本“ ”或“

导航栏下拉菜单

The .dropdown-backdrop element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).

浏览器缩放

页面缩放不可避免地会在Bootstrap和Web的其余部分中的某些组件中呈现渲染工件。 根据问题,我们也许可以解决它(先搜索,然后根据需要打开一个问题)。 但是,我们往往会忽略这些,因为它们通常只有骇人的解决方法而没有其他直接的解决方案。

Sticky :hover/:focus on iOS

虽然在大多数触摸设备上都无法使用:hover,但iOS会模仿这种行为,从而导致“粘性”悬停样式在点击一个元素后仍然存在。 仅当用户点击另一个元素时,才会删除这些悬停样式。 这种行为在很大程度上被认为是不希望的,并且在Android或Windows设备上似乎不是问题。

在整个v4 alpha和beta版本中,我们包括不完整和注释掉的代码,用于选择媒体查询shim,该代码将在模拟悬停的触摸设备浏览器中禁用悬停样式。 这项工作从未完全完成或启用,但为避免完全损坏,我们选择弃用this shim ,并将mixins保留为 伪类。

打印

即使在某些现代浏览器中,打印也可能很奇怪。

从Safari v8.0开始,使用固定宽度的.container类可能导致Safari在打印时使用异常小的字体大小。 有关更多详细信息,请参见issue #14868WebKit bug #138192)。 以下CSS是一种可能的解决方法:

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

Android stock browser

开箱即用,Android 4.1(甚至显然还有一些较新的版本)随附于Browser应用程序作为默认的Web浏览器(而不是Chrome)。 不幸的是,浏览器应用程序通常存在许多bug和与CSS的不一致之处。

Select menu

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

<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>

想看个例子吗? Check out this JS Bin demo.

校验(Validators)

为了给旧的和有漏洞的浏览器提供最佳的体验,Bootstrap在多个位置使用CSS browser hacks 将特殊的CSS定位到某些浏览器版本,以解决在浏览器中的错误。可以理解,这些黑客使CSS验证程序抱怨它们无效。 在几个地方,我们还使用了尚未完全标准化的尖端CSS功能,但这些功能仅用于逐步增强。

这些验证警告在实践中并不重要,因为CSS的非hacky部分会完全验证,并且hacky部分不会干扰非hacky部分的正常运行,因此为什么我们故意忽略这些特定警告。

由于我们包含了a certain Firefox bug的变通办法,因此我们的HTML文档同样具有一些琐碎且无关紧要的HTML验证警告。