浏览器与设备调优

学习BootStrap支持的浏览器和设备，包括旧版兼容问题、BUG和问题边界。

支持的浏览器

Bootstrap几乎支持所有主流操作系统上各浏览器的最新稳定版本。
针对Windows，则是支持Internet Explorer 10-11 / Microsoft Edge浏览器。

使用最新版本WebKit、Blink或Gecko内核的第三方浏览器（如国产360安全/极速浏览器、搜狗浏览器、QQ浏览器、UCweb浏览器），无论是直接地还是通过Web API接口，虽然BootStrap官方没有针对性的开发支持，但在大多数情况下也都是完美兼容，不会影响视觉呈现和脚本运行。以下提供更具体的支持信息。

你可以找到我们支持的浏览器及其版本的范围在我们package.json：

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

移动设备

Bootstrap支持主流移动OS的默认浏览器的最新版本。注意，不支持代理浏览器（如Opera Mini浏览器、 Opera Mobile’s Turbo 模式、 UCweb Mini浏览器、 Amazon Silk浏览器）。

Chrome Firefox Safari Android Browser & WebView内置浏览器 Microsoft Edge
Android安卓 支持 支持 N/A Android v5.0+ 支持 N/A
iOS苹果 支持 支持 支持 N/A N/A
Windows 10 Mobile 支持 支持 支持 支持 支持

桌面浏览器

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

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

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

大多数情况下，在Chromium和Chrome for Linux、Firefox火狐 for Linux和Internet Explorer 9中，Bootstrap应该看起来和运行良好，尽管它们没有得到官方的支持。

针对不同的浏览器，我们有一个BUG墙列出了详尽明细。

Internet Explorer(IE)

支持Internet Explorer 10及更高版本，不支持IE9（即使大多兼容，我们依然不推荐）。请注意，IE10中不完全支持某些CSS3属性和HTML5元素，或者需要前缀属性才能实现完整的功能（访问https://caniuse.com网站可以了解不同浏览器对CSS3和HTML5功能的支持）。

如果您需要IE8-9支持，请使用Bootstrap 3 (点此获取)，它是我们代码中最稳定的版本，官方不再发布新版，但仍然支持严重错误修复和文档维护。

移动设备的模态框和下拉组件

Overflow溢出和scroll滚动

IOS和安卓设备中，对于<body>元素中使用overflow: hidden;的支持很有限。因此在这两种设备中，当你滚动超过一个模态窗口的顶部或底部，<body>内容也会开始滚动，请参阅Chrome bug #175502 (修复于Chrome v40) 和WebKit bug #153852这两条文献。

iOS文本字段和滚动

从IOS9.2开始，当一个模态启用，如果手势触模在一个<input>文本或<textarea>文本框内，则<body>中的内容将被滚动，而不是模态本身滚动，请参阅WebKit bug #153856

.dropdown-backdrop 在IOS上无法生态（受Z-indexinge属性影响），因此，要关闭导航栏中的下拉列表，必须再次单击下拉元素（或iOS中合法的触发点击事件他元素）。

浏览器缩放

页面缩放会影响一些组件的呈现效果，无论是在Bootstrap还是其它Web构造体验中都有这样的问题，我们会尽量解决它（在没有解决之前，建议用户先行检索网上公开的方法优化）。对于大多数用户，我们建议忽略在缩放下的渲染缺陷，因为除了用hacky方法之外，它们往往没有直接的解决方案。

移动设备上的:hover/:focus 粘性(点选中)状态

:hover与:focus一般用来表达选中、点中、悬停状态。
在移动触屏体验中，并不存在真正的悬停状态，移动浏览器厂商模仿悬停使:hover具备一定的“粘性”。即，用户屏幕点击一个元素之后，:hover样式开始应用，在用户触击另一个元素之后停止应用(申明：在移动优先的WEB开发中，这往往是不推荐的，但在诸如政务或特殊应用场景，还是有一定的作用，毕竟客户的需求是第一位-译者注)。

所以，你只要在Sass编译时，将 $enable-hover-media-query设置为 ture，BootStrap则会调用 mq4-hover-shim 来禁用 :hover模拟状态，从而防止:hover的粘性。
这是一种变通方法，有一些注意事项及详细信息参阅Jquery shim文档。

打印

打印总会出各种诡异的现象-这在所有现代浏览器中都存在。

Safari浏览器从v8.0版开始，使用固定宽度的.container类可能会导致其在打印时字体非常小。有关详细信息，请参阅issue #14868、WebKit bug #138192。
解决方法用以下CSS方法定义：

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

Android安卓内置浏览器

在Android安卓4.1及之后的一些版本中会内置一个浏览器，而不是Chrome，这二者有一定的差异，因此也会造成一些错误呈现和脚本错误，这种情况下推荐在Android安卓系统上部署Chrome浏览器。
这其中包括：

Select选择菜单问题

<select>元素在安卓内置浏览器（不是Chrome）中，如果其元素内存在border-radius 和(或） border,网页上不会显示边缘属性（参阅this StackOverflow question问题描述）。
推荐用户使用下面的JS代码来移除内置浏览器的这个CSS冲突BUG，并将该<select>渲染成未样式化元素（这个方法还使用了浏览器的Agent属性嗅探避免了干扰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>

实际效果 点击jsbin.com上的范例查看。

验证器

为了最大化兼容旧版浏览器、尽可能提供最好的体验，Bootstrap在多个不同的地方使用了 browserhacks.com上的方法，以处理不同的浏览器、不同差异性版本的特殊的CSS问题，以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。甚至于还使用了一些尚未完全标准化的最新CSS方法，使系统能够渐进增强。
这些验证器的警告在实践中不会影响生产和项目开发，因为我们的CSS的非hacky部分已经充分验证，而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。
HTML进行标准化验证时也能收到一些琐碎而且无关紧要的HTML验证警告，因为整个解决方案包含一些Firefox火狐浏览器Bug，参阅a certain Firefox bug。