9.2 BSIE扩展

由于最新的Bootstrap已经不支持IE8以及低版本了,所以在这些版本的浏览器上进行开发就会有很多困难,尤其是IE6浏览器在中国还有人在用,所以有人在网上开发了一个针对IE6的兼容库,名称为BSIE(Bootstrap IE6 Compatible Library),官方网址是https://github.com/ddouble/bsie。

有点遗憾的是,该扩展还没有完全支持最新的Bootstrap 3.x版,模板支持比较好的是2.2.1版本,希望作者尽快升级,解决还在为IE6努力的开发者们。BSIE目前支持的组件和功能如表9-2所示。

9.2 BSIE扩展 - 图1

该插件在引用的时候需要特别注意,CSS需要引用两个特别的文件。示例如下:

  1. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  2. <!--[if lte IE 6]>
  3. <!-- BSIE CSS 补丁文件 -->
  4. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
  5. <!-- BSIE 额外的 CSS 补丁文件 -->
  6. <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
  7. <![endif]-->

而对于JS文件,则只需要引入一个即可。示例如下:

  1. <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
  2. <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  3.  
  4. <!--[if lte IE 6]>
  5. <!-- BSIE JS 补丁只在IE6中才执行 -->
  6. <script type="text/javascript" src="js/bootstrap-ie.js"></script>
  7. <![endif]-->

另外一个特殊情况是,如果页面里有ajax加载的内容,而且这些内容又要支持IE6的特殊功能,那么需要调用如下语句,才能让IE6工作正常。代码如下:

  1. // 让el容器中的所有元素都能兼容IE6
  2. $.bootstrapIE6(el);

其他在IE6下使用的相关注意事项,请参考官方网站的文档。