标签：
使用Bootstrap完成web的UI后，在IE 8运行时，发现.container等class的标签的的宽度并没按预期的宽度显示，本人已经根据bootstrap官方说明 http://getbootstrap.com/getting-started/#support，增加引入repond.js，
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link media="screen" href="/themes/theme.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <script src="/js/respond.min.js"></script> <![endif]-->
仔细核对过正确显示的Bootstrap Example，无论如何还是不能正确显示，因IE 8不支持css @media ，也就是说respond.js并未正确运行修改css。
几经折磨后，才忽然想起，是否theme.css里@import 的bootstrap.css有问题，立刻修改为如下：
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link media="screen" href="/themes/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet" /> <link media="screen" href="/themes/bootstrap/3.0.3/css/bootstrap-theme.css" rel="stylesheet" /> <link media="screen" href="/themes/theme.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <script src="/js/respond.min.js"></script> <![endif]-->
随则运行，整个页面在IE8下终于正确显示。问题解决了，那反过来应该再仔细查阅Bootstrap文档，悲催的发现有如下描述片段在Getting started里：
@importRespond.js doesn‘t work with CSS that‘s referenced via @import . In particular, some Drupal configurations are known to use @import . See the Respond.js docs for details.
所以，吸取教训，读书要认真，认真了能省很多时间... ...
http://getbootstrap.com/ bootstrap官网
http://v3.bootcss.com/css/ bootstrap学习
http://www.runoob.com/ 前端教程
标签：
原文地址：http://www.cnblogs.com/longhs/p/4689854.html
