• 浏览器与设备调优
    • 支持的浏览器
      • 移动设备
      • 桌面浏览器
    • Internet Explorer(IE)
    • 移动设备的模态框和下拉组件
      • Overflow溢出和scroll滚动
      • iOS文本字段和滚动
      • Navbar导航栏下拉菜单
    • 浏览器缩放
    • 移动设备上的:hover/:focus 粘性(点选中)状态
    • 打印
    • Android安卓内置浏览器
      • Select选择菜单问题
  • 验证器

    浏览器与设备调优

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

    支持的浏览器

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

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

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

    1. "browserslist": [
    2.   "last 1 major version",
    3.   ">= 1%",
    4.   "Chrome >= 45",
    5.   "Firefox >= 38",
    6.   "Edge >= 12",
    7.   "Explorer >= 10",
    8.   "iOS >= 9",
    9.   "Safari >= 9",
    10.   "Android >= 4.4",
    11.   "Opera >= 30"
    12. ]

    移动设备

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

    ChromeFirefoxSafariAndroid Browser & WebViewMicrosoft Edge
    Android安卓支持支持N/AAndroid v5.0+ 支持N/A
    iOS苹果支持支持支持N/AN/A
    Windows 10 MobileN/AN/AN/AN/A支持

    桌面浏览器

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

    ChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafari
    MacSupportedSupportedN/AN/ASupportedSupported
    WindowsSupportedSupportedSupported, IE10+SupportedSupportedNot supported

    对于 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

    Navbar导航栏下拉菜单

    .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方法定义：

    1. @media print {
    2.   .container {
    3.     width: auto;
    4.   }
    5. }

    Android安卓内置浏览器

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

    Select选择菜单问题

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

    1. <script>
    2. $(function () {
    3.   var nua = navigator.userAgent
    4.   var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
    5.   if (isAndroid) {
    6.     $('select.form-control').removeClass('form-control').css('width', '100%')
    7.   }
    8. })
    9. </script>

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

    验证器

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