公司新上的项目，前端用的Bootstrap3的框架，但它已经放弃对IE9下的支持了。可IE8还是有着许多用户，不能不照顾到他们，IE7以下的，我只想说，现在什么年代了，要解放思想，与时俱进啊，就不能动动手升下级吗。
于是着手解决，在发现了解决方法，亲测可行。在此声名对此作者的感谢。
进入主题。
Bootstrap是一个响应式的布局，你可以在宽屏电脑、普通电脑，平板电脑，手机上都得到非常优秀的布局体验。这种响应式的布局正是通过 CSS3的媒体查询（Media Query）功能实现的，根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性，Bootstrap在开发文档中写了如何使用 进行兼容IE8。下面讲解下如何让Bootstrap 3兼容IE8浏览器，至于如何兼容IE6 IE7，请绕道搜索bsie (bootstrap2)。
Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美，部分组件不保证完全兼容，还是要Hack的。这里不谈。还有些细节没有注意到，导致IE8没法 响应式布局。
respond.js（Github下载）
html5shiv : html5.js(Github下载)
<!doctype html> > 5 <head> > 加入meta标签 <meta name=content=> <meta http-equiv=content=> content=/> 16 <title>ie8</title> 要和Bootstrap文件同域。这里我放在本地，因为之后的部署比较简单。 href=> href=> 22 <!--[if lte IE 9]> 引入respond.js 和 html5.js <script src=></script> <script src=></script> 31 <![endif]--> 添加1.X版本的Jquery库 <script src=></script> ></script> 38 </head> 39 <body> 40 </body> 41 </html>
还要注意几点：
1、本地调试需要Web Server（如IIS、Apache，Nginx），单纯地本地打开文件不能看到兼容效果。
2、如果你发现已经引用了respond.js和Bootstrap，仍无效果，请查看你的Bootstrap是否使用了CDN文件，导致两不同域，是的话请都改为本地文件。
3、本文主要针对Bootstrap3版本，如果你是Bootstrap2 ，请搜索 BSIE ，还可以兼容IE6浏览器.
4、Bootstrap3 需要Html5文档声明。
排版如下：
1 <!doctype html> > 3 <head> > content=> content=> content=/> 8 <title>ie8</title> href=> href=> 11 <!--[if lte IE 9]> ></script> ></script> 14 <![endif]--> ></script> ></script> 17 </head> 18 <body> 19 </body> 20 </html>
好了，去看看怎么样吧。
相关文章
精彩导读
热门资讯
关注我们
