浏览器和设备
了解 Bootstrap 支持的从现代到旧式的浏览器和设备,包括每种浏览器和设备的已知怪癖和错误。
支持的浏览器
🌐 Supported browsers
Bootstrap 支持所有主流浏览器和平台的最新稳定版本。
🌐 Bootstrap supports the latest, stable releases of all major browsers and platforms.
使用最新版本的 WebKit、Blink 或 Gecko 的替代浏览器,无论是直接使用还是通过平台的 Web 视图 API,均不被明确支持。然而,Bootstrap 在这些浏览器中(在大多数情况下)也应能正确显示和运行。更具体的支持信息见下文。
🌐 Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
你可以在我们的 .browserslistrc file (https://github.com/twbs/bootstrap/blob/v5.3.8/.browserslistrc) 中找到我们支持的浏览器及其版本范围:
🌐 You can find our supported range of browsers and their versions in our .browserslistrc file:
# https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)
我们使用 Autoprefixer 通过 CSS 前缀来处理预期的浏览器支持,它使用 Browserslist 来管理这些浏览器版本。请查阅它们的文档以了解如何将这些工具集成到你的项目中。
🌐 We use Autoprefixer to handle intended browser support via CSS prefixes, which uses Browserslist to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.
移动设备
🌐 Mobile devices
一般来说,Bootstrap 支持每个主流平台默认浏览器的最新版本。请注意,代理浏览器(例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk)不受支持。
🌐 Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
| Chrome | Firefox | Safari | 安卓浏览器 & WebView | |
|---|---|---|---|---|
| 安卓 | 支持 | 支持 | — | v6.0+ |
| iOS | 支持 | 支持 | 支持 | — |
桌面浏览器
🌐 Desktop browsers
同样,大多数桌面浏览器的最新版本都受支持。
🌐 Similarly, the latest versions of most desktop browsers are supported.
| Chrome | Firefox | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|
| Mac | 支持 | 支持 | 支持 | 支持 | 支持 |
| Windows | 支持 | 支持 | 支持 | 支持 | — |
对于 Firefox,除了最新的普通稳定版本外,我们还支持 Firefox 的最新扩展支持版本(ESR)。
🌐 For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.
非官方的说法是,Bootstrap 在 Chromium 和 Chrome for Linux 以及 Firefox for Linux 中的外观和行为应该足够好,尽管它们没有得到官方支持。
🌐 Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, and Firefox for Linux, though they are not officially supported.
IE 浏览器
🌐 Internet Explorer
不支持 Internet Explorer。如果你需要支持 Internet Explorer,请使用 Bootstrap v4。
🌐 Internet Explorer is not supported. If you require Internet Explorer support, please use Bootstrap v4.
移动设备上的模态框和下拉菜单
🌐 Modals and dropdowns on mobile
溢出和滚动
🌐 Overflow and scrolling
在 iOS 和 Android 上,对 <body> 元素的 overflow: hidden; 支持非常有限。为此,当你在这些设备的浏览器中滚动到模态框的顶部或底部时,<body> 内容将开始滚动。请参见 Chrome bug #175502(在 Chrome v40 中修复)和 WebKit bug #153852。
🌐 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 文本字段和滚动
🌐 iOS text fields and scrolling
截至 iOS 9.2,当模态窗口打开时,如果滚动手势的初始触摸在文本 <input> 或 <textarea> 的边界内,模态窗口下方的 <body> 内容将会被滚动,而不是模态窗口本身。请参见 WebKit bug #153856。
🌐 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.
浏览器缩放
🌐 Browser zooming
页面缩放不可避免地会在一些组件中出现渲染瑕疵,无论是在 Bootstrap 还是其他网页中。根据具体问题,我们可能能够修复它(先搜索,然后如果有必要再提交问题)。然而,我们倾向于忽略这些问题,因为它们通常除了临时解决方法之外没有直接的解决方案。
🌐 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.
验证者
🌐 Validators
为了向老旧和存在问题的浏览器提供尽可能好的体验,Bootstrap 在多个地方使用了 CSS 浏览器技巧 来针对特定浏览器版本应用特殊的 CSS,以绕过浏览器自身的 bug。这些技巧可以理解地会导致 CSS 验证器抱怨它们是无效的。在一些地方,我们还使用了尚未完全标准化的前沿 CSS 特性,但这些仅用于渐进式增强。
🌐 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.
这些验证警告实际上无关紧要,因为我们 CSS 中非 hacky 部分确实完全验证了,而 hacky 部分不会干扰非 hacky 部分的正常运行,因此我们故意忽略了这些特定的警告。
🌐 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.
由于我们包含了针对某个 Firefox 错误的解决方法,我们的 HTML 文档同样存在一些微不足道且无关紧要的 HTML 验证警告。
🌐 Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.