在 GitHub 上查看

浏览器和设备

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

受支持的浏览器

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

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

你可以在 我们的 .browserslistrc 文件 中找到我们支持的浏览器范围及其版本

# 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）。

Chrome Firefox Safari Android 浏览器和 WebView Microsoft Edge
Android 支持 支持 不适用 支持 Android v5.0+ 支持
iOS 支持 支持 支持 不适用 支持
Windows 10 Mobile 不适用 不适用 不适用 不适用 支持

桌面浏览器

类似地，支持大多数桌面浏览器的最新版本。

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 支持 支持 不适用 支持 支持 支持
Windows 支持 支持 支持，IE10+ 支持 支持 不支持

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

非官方地，Bootstrap 应该在 Linux 的 Chromium 和 Chrome、Linux 的 Firefox 以及 Internet Explorer 9 中看起来和表现得足够好，尽管它们不受官方支持。

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

Internet Explorer

支持 Internet Explorer 10+；不支持 IE9 及更低版本。请注意，某些 CSS3 属性和 HTML5 元素在 IE10 中不受完全支持，或需要前缀属性才能完全发挥功能。访问 Can I use… 以详细了解 CSS3 和 HTML5 功能的浏览器支持。如果您需要 IE8-9 支持，请使用 Bootstrap 3。

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

溢出和滚动

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

iOS 文本字段和滚动

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

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

浏览器缩放

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

iOS 上的粘性 :hover/:focus

虽然大多数触摸设备上都不支持 :hover，但 iOS 会模拟此行为，从而导致在轻触一个元素后仍然存在的“粘滞”悬停样式。只有当用户轻触另一个元素时，这些悬停样式才会被移除。这种行为被认为在很大程度上不受欢迎，并且似乎在 Android 或 Windows 设备上不是问题。

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

打印

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

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

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

Android 原生浏览器

开箱即用，Android 4.1（甚至一些较新的版本显然）将浏览器应用程序作为默认的 Web 浏览器（而不是 Chrome）。不幸的是，浏览器应用程序在 CSS 中存在许多错误和不一致之处。

选择菜单

在 <select> 元素上，如果应用了 border-radius 和/或 border，Android 库存浏览器将不会显示侧边控件。（有关详细信息，请参阅 此 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 来解决浏览器本身的缺陷。这些黑客理所当然地会导致 CSS 验证器抱怨它们无效。在一些地方，我们还使用尚未完全标准化的前沿 CSS 功能，但这些功能纯粹用于渐进增强。

这些验证警告在实践中无关紧要，因为我们 CSS 的非黑客部分完全有效，而黑客部分不会干扰非黑客部分的正常运行，因此我们故意忽略这些特定警告。

我们的 HTML 文档同样有一些琐碎且无关紧要的 HTML 验证警告，因为我们包含了一个解决 特定 Firefox 缺陷 的解决方法。