bootstrap3支持ie系列

原文：Http://79px.com/html-CSS/263

 源泉  星期四, 11/20/2014 - 16:25

其实，之前一直以为Bootstrap3很难实现对ie9一下的版本兼容。

但前两天看了一个同行的网站，用的Bootstrap3做的，结果我用ie8测的时候，网站基本上是正常的。这不得不让我怀疑之前自己的看法的。于是就抽时间研究了下Bootstrap在ie8这方便的兼容配置。

分析

首先我用ie11打开测试网站。然后审查元素之后将页面渲染模式切换到ie8下，然后发现网格宽度什么的都不见了。所以所有的网格都默认用了100%的宽度。也就出现了布局混乱的情况。然后我有查看了Bootstrap的CSS源代码。发现这些定义宽度的CSS都是写在@media这种媒体查询中的。

问题所在

@media是css3才有的。那么这里就可以肯定ie8是不支持@media媒体查询的。

解决方案

然后从GitHub上发现了https://github.com/scottjehl/Respond这个项目。可以让媒体查询在ie6-8下也能被识别。然后简短的看了此项目的介绍。得出Bootstrap3兼容ie8解决方案即在页面头部加入如下代码：

<!--[if lt IE 9]>
  <script src="js/respond.min.js"></script>
<![endif]-->

当然，需要确保你的js路径是对的。

下面提供一个适合国内使用的cdn方案：

<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

注意事项

值得注意的是，Respond.js必须是在服务器-浏览器的环境下才会有效的。也就是说，如果你用直接打开HTML文件的方式来查看是没有效果的。