Bootstrap 3支持IE 8遇到的一个小问题

使用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里：

Respond.js and @import

Respond.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/ 前端教程