浏览器和设备

优质

小牛编辑

131浏览

2023-12-01

Bootstrap支持多种多样的现代浏览器以及设备，还支持一些较早的浏览器。具体支持哪一些，请看下面内容。下面还列出了一些已知的漏洞的详细信息。

支持的浏览器

Bootstrap 支持所有的主流浏览器和平台的最新的、稳定的版本。在 Windows 中, **我们支持 Internet Explorer 9-11 **。下面提供了更多详细的支持信息。

移动设备

总的来说，Bootstrap支持所有主流平台的最新版本的默认浏览器。

	Chrome	Firefox	Opera	Safari	Android Browser & WebView
Android	支持	支持	不支持	N/A	Android v5.0+ 支持
iOS	支持	N/A	不支持	支持	N/A

桌面浏览器

差不多的，大多数最新版本的桌面浏览器也是支持的。

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	支持	支持	N/A	N/A	支持	支持
Windows	支持	支持	支持	支持	支持	不支持

对于 Firefox, 除了最新的普通稳定版本, 我们也支持Firefox浏览器最新的扩展支持版本 (ESR)。

非正式地，Bootstrap应当在Chromium系统以及Linux系统的Chrome、Linux系统的Firefox以及Internet Explorer 8或更早版本的IE中也表现良好。虽然它们不是正式支持的。

对于那个浏览器Bug列表，Bootstrap不得不面对它。请看我们的Wall of browser bugs。

Internet Explorer 9

Internet Explorer 9也是支持的。然而，你需要知道，有一些CSS3属性和HTML5元素不被完全支持。

功能	状态
`border-radius`圆角边框	支持
`box-shadow`盒阴影	支持
`transform`变形	支持, 带`-ms`前缀
`transition`过渡	不支持
`placeholder`占位符	不支持

访问Can I use…获取更多关于 CSS3 和 HTML5 支持的信息。

支持Internet Explorer 8

自 v4起，Bootstrap不再支持IE8。如果你需要IE8支持，我们建议你使用Bootstrap 3。我们的团队还会继续支持Bootstrap 3，修复它的Bug，但是不会给它增加新功能了。

作为替代，你可以添加一些第三方的JavaScript来恢复Bootstrap 4对Internet Explorer 8的支持。你需要下面这些东西：

我们不对这些提供支持。然而你可以在our Slack channel的社区中获得一些帮助。

IE兼容模式

Bootstrap 在老版本的Internet Explorer兼容模式中不受支持。为了确保你正在使用IE的最新的渲染模式，请在你的网页的合适位置放置下面这个<meta>标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

要想打开调试工具以确认文档模式，请按F12并检查“文档模式”。

所有的Bootstrap的文档和示例都包含了这个标签，以确保在每个版本的IE浏览器（Bootstrap支持的IE版本）中，都能得到最好的渲染可能性。

参见this StackOverflow question获得更多信息。

Windows Phone 8中的Internet Explorer 10

Windows Phone 8中的Internet Explorer 10版本比Update 3 (a.k.a. GDR3)更老，无法在@-ms-viewport规则中区分device width和viewport width，因此在Bootstrap 的CSS中应用媒体查询不起作用。为了解决这个问题，你需要包含下面的JavaScript以绕过这个bug。

// Copyright 2014-2015 Twitter, Inc.

// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

请阅读Windows Phone 8 and Device-Width以获取更多的使用指导信息。

作为一个提醒，我们把这些都写进了Bootstrap的文档并且进行了举例说明。

模态窗口，导航条，以及虚拟键盘

溢出和滚动

iOS和安卓对<body>元素中使用overflow: hidden的支持很有限。因此，在这两种设备的浏览器中，当你滚动超过一个模态窗口的顶部或底部，<body>内容就会开始滚动。

虚拟键盘

同时，注意如果你正在使用一个固定导航栏或者在模态窗口中使用输入法，iOS有一个渲染bug，即当触发弹出虚拟键盘时，它不会更新固定元素的位置。对这个问题的一点变通包括把你的元素转换到position: absolute;，包括激发一个焦点计时器来手工修正位置。这个不归Bootstrap处理的，所以你的应用程序如有这个问题采取何种解决方法取决于你自己。

导航栏下拉菜单

在iOS中，导航栏上不能使用.dropdown-backdrop元素，因为z-indexing的复杂性。因此，关闭导航栏的下拉菜单，你必须直接点击下拉菜单元素（或者 iOS 中任何其他可以启动单击事件的元素)。

浏览器缩放

页面缩放不可避免地影响一些组件的渲染效果, 无论是在Bootstrap网页还是在其它网页中。对于这个问题，我们可能能够修复它（发起话题前，如果可以的话请先搜索一下）。然而，我们倾向于忽视它们，因为它们大多数没有直接的解决办法，或者不太容易解决。

移动设备上的`:hover`/`:focus`粘性

即使在大多数触摸屏上，真正的悬停不可能实现，大多数移动浏览器模仿停县并使得:hover“有粘性”。换句话说，在触击一个元素之后，:hover样式样式开始应用，在用户触击另一个元素之后停止应用。在移动优先的网站上，这种表现通常是不可取的。

Bootstrap包含了针对它的一个变通，虽然它默认是不可用的。从Sass编译时只要把$use-hover-media-query设置为true，为了浏览器中禁用用以模拟悬停的:hover样式，Bootstrap将使用mq4-hover-shim，它能防止粘性的:hover样式。这个变通方法有一些附加说明；请阅读 shim 的文档以了解更多。

打印

哪怕在一些现代的浏览器中，打印也可以很快。

特别是，自从Chrome v32起，无论页边距设置为什么，当需要打印一个网页时，Chrome使用一个明显窄于物理纸张尺寸的视口宽度来解决媒体查询。这将导致打印时，Bootstrap的特小网格出人意料地被激活。请阅读#12078了解推荐的变通方法：

除此之外，自从Safari v8.0起，固定宽度的.container可以引起Safari在打印时使用一个不寻常的小字体尺寸。请看#14868 以了解更多。一个潜在的变通方法就是添加下列的CSS：

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

安卓内置浏览器

除了盒子，Android 4.1（以及更新的版本）使用Browser应用作为默认浏览器（而不是用Chrome）。很不幸的是，该Browser应用有很多的bug以及CSS不一致。

选项菜单

在<select>元素中，如果不应用border-radius以及border，安卓内置浏览器不会显示边缘控件。（请阅读 this StackOverflow question 以了解更多详情。）使用下面的代码片段可以在安卓内置浏览器中移除这个CSS冲突，并把该<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 demo 上找找。

验证器

为了能够向漏洞百出的老版本的浏览器提供尽可能好的体验，Bootstrap在多个不同的地方使用了 CSS 浏览器hacks 使用针对对于特定的浏览器版本的特殊的CSS，以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。在一些地方，我们也使用尚未完全标准化的前沿CSS特征，但是使用它们纯粹是为了渐进增强。

这些验证器的警告在实践中没生产妨碍，因为我们的CSS的非hacky部分已经充分验证，而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。

我们的HTML同样有一些琐碎而且无关紧要的HTML验证警告，因为我们的解决方案包含一定的 Firefox 的 bug.