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

作者: 那夜我还很年幼~
发布时间:2015-08-07 10:13:07

使用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/ 前端教程

 

标签: Bootstrap
来源:http://www.cnblogs.com/longhs/p/4689854.html

推荐: