• 浏览器与设备调优
    • 支持的浏览器
      • 移动设备
      • 桌面浏览器
    • 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。