Source

浏览器和设备

了解 Bootstrap 支持的从现代到旧的浏览器和设备，包括每个已知的怪癖和错误。

支持的浏览器

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

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

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

移动设备

一般来说，Bootstrap 支持各大平台默认浏览器的最新版本。请注意，不支持代理浏览器（例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk）。

铬合金 火狐 苹果浏览器 Android 浏览器和 Web 视图 微软边缘
安卓 支持的 支持的 不适用 支持安卓 v5.0+ 支持的
iOS 支持的 支持的 支持的 不适用 支持的
Windows 10 移动版 不适用 不适用 不适用 不适用 支持的

桌面浏览器

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

铬合金 火狐 IE浏览器 微软边缘 歌剧 苹果浏览器
苹果电脑 支持的 支持的 不适用 不适用 支持的 支持的
视窗 支持的 支持的 支持，IE10+ 支持的 支持的 不支持

对于 Firefox，除了最新的正常稳定版本外，我们还支持最新的扩展支持版本 (ESR)版本的 Firefox。

非官方的，Bootstrap 在 Chromium 和 Chrome for Linux、Firefox for Linux 和 Internet Explorer 9 中的外观和行为应该足够好，尽管它们不受官方支持。

有关 Bootstrap 必须解决的一些浏览器错误的列表，请参阅我们的浏览器错误墙。

IE浏览器

支持 Internet Explorer 10+；IE9及以下没有。请注意，IE10 不完全支持某些 CSS3 属性和 HTML5 元素，或者需要前缀属性才能获得完整功能。访问Can I use…了解浏览器对 CSS3 和 HTML5 功能的支持的详细信息。如果您需要 IE8-9 支持，请使用 Bootstrap 3。

移动设备上的模态和下拉菜单

溢出和滚动

overflow: hidden;在 iOS 和 Android 中，对元素的支持<body>非常有限。为此，当您在任一设备的浏览器中滚动超过模式的顶部或底部时，<body>内容将开始滚动。请参阅Chrome 错误 #175502（在 Chrome v40 中修复）和WebKit 错误 #153852。

iOS 文本字段和滚动

从 iOS 9.2 开始，当 modal 打开时，如果滚动手势的初始触摸在 textual<input>或 a的边界内<textarea>，则将滚动 modal 下面的<body>内容而不是 modal 本身。请参阅WebKit 错误 #153856。

由于 z-indexing 的复杂性，该.dropdown-backdrop元素未在 iOS 上的导航中使用。因此，要关闭导航栏中的下拉菜单，您必须直接单击下拉元素（或任何其他会在 iOS 中触发单击事件的元素）。

浏览器缩放

页面缩放不可避免地会在某些组件中呈现渲染伪影，无论是在 Bootstrap 中还是在 Web 的其余部分中。根据问题，我们可能能够修复它（先搜索，然后在需要时打开问题）。然而，我们倾向于忽略这些，因为除了 hacky 变通方法之外，它们通常没有直接的解决方案。

粘性:hover/:focus在 iOS 上

虽然:hover在大多数触控设备上是不可能的，但 iOS 会模拟这种行为，从而导致在点击一个元素后持续存在的“粘性”悬停样式。只有当用户点击另一个元素时，这些悬停样式才会被删除。这种行为在很大程度上被认为是不可取的，并且在 Android 或 Windows 设备上似乎不是问题。

在我们的 v4 alpha 和 beta 版本中，我们包含了用于选择媒体查询填充程序的不完整和注释掉的代码，该填充程序将禁用模拟悬停的触摸设备浏览器中的悬停样式。这项工作从未完全完成或启用，但为了避免完全损坏，我们选择弃用此 shim并将 mixin 作为伪类的快捷方式。

印刷

即使在一些现代浏览器中，打印也可能很古怪。

从 Safari v8.0 开始，使用固定宽度.container类会导致 Safari 在打印时使用异常小的字体大小。有关详细信息，请参阅问题 #14868和WebKit 错误 #138192。一种可能的解决方法是以下 CSS：

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

安��股票浏览器

开箱即用，Android 4.1（甚至显然是一些较新的版本）附带了浏览器应用程序作为默认的网络浏览器选择（而不是 Chrome）。不幸的是，浏览器应用程序通常有很多错误和与 CSS 不一致的地方。

选择菜单

在<select>元素上，如果应用了border-radius和/或，Android 股票浏览器将不会显示侧面控件border。（有关详细信息，请参阅此 StackOverflow 问题。）使用下面的代码片段删除有问题的 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>

想看一个例子吗？看看这个 JS Bin 演示。

验证器

为了给旧的和有问题的浏览器提供尽可能好的体验，Bootstrap 在几个地方使用CSS 浏览器黑客来将特殊的 CSS 定位到某些浏览器版本，以解决浏览器本身的错误。这些 hack 可以理解地导致 CSS 验证器抱怨它们是无效的。在一些地方，我们还使用了尚未完全标准化的前沿 CSS 特性，但这些特性纯粹用于渐进增强。

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

由于我们包含了针对某个 Firefox 错误的解决方法，我们的 HTML 文档同样有一些琐碎和无关紧要的 HTML 验证警告。