原文：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文件的方式来查看是没有效果的。
