附录A　浏览器兼容性支持

附录A　浏览器兼容性支持

Bootstrap的目标是在最新的桌面浏览器和移动浏览器上有最好的表现，也就是说，在一些比较老旧的浏览器上，某些组件渲染的样式可能会有些不同，但是其功能是完整的。

如表A-1所示的浏览器在不同操作系统下的最新版均支持Bootstrap。

附录A　浏览器兼容性支持 - 图1

表示该操作系统上没有这种浏览器。

1.IE8和IE9

Bootstrap默认是支持IE8和IE9的，但是由于很多CSS3属性和HTML5元素（例如，圆角矩形和投影）都不被支持，所以一些特性无法发挥。另外，IE8还需要使用Respond.j文件，两者配合起来才能实现对媒体查询（media query）的支持。如表A-2所示是一些不被支持的功能。

附录A　浏览器兼容性支持 - 图2

2.IE8和Respond.js

如果在IE8下使用Respond.js进行项目开发工作的话，需要注意以下内容：

❑如果和Respond.js一起使用的CSS文件分布在不同的子域名（或者CDN网络）的话，则需要特殊的设置才行，详情访问以下网站：https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup

❑由于浏览器安全的原因，Respond.js不支持file:// 协议的引用。

❑Respond.js也不支持@import引入的CSS文件。

3.IE8和box-sizing

由于IE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用，所以Bootstrap开发团队从v3.0.1版本开始，在.container上不再使用max-width了。

4.IE兼容性模式

由于Bootstrap不支持IE的兼容性模式，所以为了让IE浏览器运行最新的渲染模式，建议将如下标签加入项目的所有页面中，确保每个页面在IE浏览器中都能保持最好的渲染效果。

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

5.Windows 8中的IE10和Windows Phone8

IE10并没有将屏幕宽度和视口（viewport）宽度区别出来，这就导致Bootstrap中的媒体查询并不能很好地发挥作用。要解决这个问题，可以引入下面列出的这段CSS暂时修复该问题。

@-ms-viewport       { width: device-width; }

然而，上述代码会导致Windows Phone 8设备按照桌面浏览器的方式渲染页面，而不是较窄的“手机”渲染方式。为了解决这个问题，还需要加入以下CSS和JavaScript代码，直到微软修复该问题为止。

CSS代码如下：

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

JavaScript代码如下：

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

6.Safari对百分比数字凑整的问题

从OS X版Safari v6.1和iOS v7.0.1版Safari开始，其浏览器的绘制引擎在处理.col--1所对应的百分比小数时存在bug。也就是说，如果在一行（row）之中定义了12个单独的列（.col--1），就会看到这一行比其他行要短一些。官方团队目前还未解决这个问题，但可以通过如下方式进行避免：

❑为最后一列添加.pull-right，将其强制向右对齐。

❑手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）。

官方团队将继续跟踪这个问题，如果有更方便的解决方案，就会更新官方代码。

7.模态框（Modal）、导航（Navbar）和虚拟键盘

（1）溢出和滚动

在iOS和Android上，<body>元素对overflow: hidden的支持很有限。其结果就是，在这两种设备上的浏览器中，当滚动屏幕超过模态框的顶部或底部时，<body>中的内容将开始随着滚动。

（2）虚拟键盘

如果正在模态框上面输入内容（iOS上的绘制bug），当触发虚拟键盘之后，模态框不会更新fixed元素的位置。这有几种解决方案，如将fixed元素转变为position: absolute或启动一个定时器手工修正其位置。官方没有将这些方案加入Bootstrap中，因此，需要自己选择最好的解决方案应用到项目中。

（3）导航下拉菜单

在iOS平台上没有应用.dropdown-backdrop样式，是因为其平台上的z-indexing太复杂了。因此，如果要在导航栏上关闭下拉菜单，需要单击下拉菜单元素来关闭（或者单击可以在iOS平台触发事件的其他元素也行）。

8.浏览器缩放

不可避免地，页面的缩放功能可能会将某些组件搞得很凌乱，不仅仅是Bootstrap，整个互联网上的所有网站都是这样。官方更倾向于忽略这些问题，因为这些问题除了一些hack手段，一般没有直接的解决方案。

9.打印机视窗

即便是最新版本的浏览器，在打印方面也可能出现问题。特别是Chrome v32，在打印页面使用媒体查询语法时，不管怎么设置margin，其视窗的宽度总是小于物理纸张大小。其可能导致超小型屏幕上的栅格系统在打印时被意外激活。我们的建议解决方法如下：

❑拥抱超小型屏幕上的栅格系统，确保页面可接受。

❑定义Less变量@screen - *，确保打印纸比超小型网格大。

❑为打印媒体（print media）添加自定义媒体查询，强制改变网格的大小。

10.Android stock浏览器

Android从4.1开始，默认情况下是使用stock浏览器，可惜该浏览器对HTML和CSS的支持不是很完美，比如，该浏览器下的select元素不支持border-radius和border语法样式。所以在使用的时候，需要对此进行特殊处理。如下代码，判断如果不是Chrome、afari、Mozilla浏览器，就删除样式设置。

<script>
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>

附录A 浏览器兼容性支持

附录A 浏览器兼容性支持

附录A　浏览器兼容性支持

附录A　浏览器兼容性支持