View on GitHub

浏览器和设备

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

支持的浏览器

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

不明确支持使用最新版本的WebKit、Blink或Gecko的替代浏览器，无论是直接使用还是通过平台的web视图API使用。但是， 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浏览器Mini、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 Supported Supported Supported
Windows Supported Supported Supported, IE10+ Supported Supported Not supported

对于Firefox，除了最新的普通稳定版本外，我们还支持Firefox的最新扩展支持版本（ESR）。

非正式地说，引导程序在Chromium和Chrome for Linux、Firefox for Linux和InternetExplorer9中的外观和行为应该足够好，尽管它们没有得到官方的支持。

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

IE浏览器

支持Internet Explorer 10+；不支持IE9及以下版本。请注意，某些CSS3属性和HTML5元素在IE10中不完全支持，或者需要前缀属性才能实现全部功能。有关CSS3和HTML5功能的浏览器支持的详细信息，请访问Can I use…。 如果您需要IE8-9支持，请使用bootstrap3。

移动设备上的模态框和下拉列表

溢出和滚动

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

iOS文本字段和滚动

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

由于z-indexing的复杂性，nav中的iOS上不使用 .dropdown-backdrop元素。因此，要关闭navbars中的下拉列表，必须直接单击dropdown元素（或 在iOS中触发click事件的任何其他元素）。

浏览器缩放

页面缩放不可避免地会在某些组件中出现呈现工件，包括 Bootstrap 和web的其余部分。根据问题的不同，我们可能能够修复它（首先搜索，然后根据需要打开一个问题）。然而，我们倾向于忽略这些，因为它们通常没有直接的解决方案，除了黑客的变通方法。

粘性（Sticky） :hover/:focus 在 iOS上

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

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

打印

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

从SafariV8.0开始，使用 fixed-width .container 类会导致Safari在打印时使用非常小的字体大小。有关详细信息，请参阅 issue #14868 和 WebKit bug #138192 。一种可能的解决方法是以下CSS：

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

Android 备用浏览器

android4.1（甚至一些较新的版本）附带了浏览器应用程序作为默认的web浏览器（相对于Chrome）。不幸的是，浏览器应用程序通常有很多错误和与CSS不一致的地方。

选择菜单

在 <select>元素上，如果应用了border-radius 和/或 border，Android备用浏览器将不会显示侧控件。（请参阅下面的 StackOverflow 问题了解详细信息。）使用下面的代码片段删除有问题的CSS，并在Android备用浏览器上将 <select>呈现为未样式化的元素。用户代理嗅探可以避免对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的非hacky部分确实会完全验证，并且hacky部分不会干扰非hacky部分的正常功能，因此我们故意忽略这些特定警告的原因。

我们的HTML文档同样有一些无关紧要的HTML验证警告，因为我们包含了一个针对某个Firefox bug的解决方案。