浏览器和移动设备的支持情况
了解 Bootstrap 所支持的新和旧的浏览器和设备，以及每种浏览器和设备的已知问题和 bug。
支持的浏览器
Bootstrap 支持所有主流浏览器和平台的 最新、稳定版本。在 Windows 上，我们支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。
对于其它使用了最新版本的 WebKit、Blink 或 Gecko 内核的浏览器，或者直接或间接调用了平台的 web view API，都不是明确被支持的。但是，Bootstrap 应该（大多数情况下）在这些浏览器中是能够正常显示和运行的。下面列出了更具体地支持情况。
你可以在 .browserslistrc 文件 中找到 Bootstrap 所支持地浏览器及版本列表：
# 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 支持每个主要平台上的默认浏览器的最新版本。请主要，基于代理（proxy）模式的浏览器（例如 Opera Mini、Opera Mobile’s Turbo mode、UC Browser Mini、Amazon Silk，这些浏览器自身并不具备完整的页面渲染能力）是不被支持的。
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | 支持 | 支持 | N/A | Android v5.0+ supported | 支持 |
| iOS | 支持 | 支持 | 支持 | N/A | 支持 |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | 支持 |
桌面浏览器
同样，大多数桌面浏览器的最新版本是被支持的。
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | 支持 | 支持 | N/A | 支持 | 支持 | 支持 |
| Windows | 支持 | 支持 | 支持, IE10+ | 支持 | 支持 | 不支持 |
对于 Firefox 浏览器，除了最新的常规稳定版本外，我们还支持最新的 Extended Support Release (ESR) 版本。
虽然 Bootstrap 在 Chromium、Linux 版 Chrome、Linux 版 Firefox 以及 Internet Explorer 9 上也表现地很不错，但这些浏览器或版本是不被 Bootstrap 官方支持的。
For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.
IE 浏览器
支持 Internet Explorer 10 及更新版本； 不支持 IE9 及更低版本。请注意，某些 CSS3 属性和 HTML5 元素在 IE10 中没有完整的实现，或者要使用某些带前缀的属性才能具有全部功能。请访问 Can I use… 网站以了解有关浏览器对 CSS3 和 HTML5 功能的支持情况。如果你需要支持 IE8-9，请使用 Bootstrap v3 版本。
Modals and dropdowns on mobile
Overflow and scrolling
Support for overflow: hidden; on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <body> content will begin to scroll. See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.
iOS text fields and scrolling
As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <input> or a <textarea>, the <body> content underneath the modal will be scrolled instead of the modal itself. See WebKit bug #153856.
Navbar Dropdowns
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).
Browser zooming
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
Sticky :hover/:focus on iOS
While :hover isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices.
Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we’ve opted to deprecate this shim and keep the mixins as shortcuts for the pseudo-classes.
Printing
Even in some modern browsers, printing can be quirky.
As of Safari v8.0, use of the fixed-width .container class can cause Safari to use an unusually small font size when printing. See issue #14868 and WebKit bug #138192 for more details. One potential workaround is the following CSS:
@media print {
.container {
width: auto;
}
}
Android stock browser
Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
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>
Want to see an example? Check out this JS Bin demo.
Validators
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.
These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.