Bootstrap 2.3.2响应式布局在IE8上不起作用

时间:2014-03-05 15:29:25

标签: html css twitter-bootstrap internet-explorer-8 media-queries

我会尝试更具体。我在主控件上有这个样式表

 <link href="/css/Fonts.css" rel="stylesheet" />
        <link href="/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/css/bootstrap-responsive.min.css" rel="stylesheet" />
        <link href="/css/mysite.css" rel="stylesheet" />
        <link href="/css/responsive.css" rel="stylesheet" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="/css/explorer.css" />
        <![endif]-->

    <!-- css3-mediaqueries.js for IE less than 9 -->
        <!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

我的大屏幕容器宽度来自responsive.css,我有这个代码

@media handheld, only screen and (min-width: 1440px){
      {.container:1400px;}
   }

当我在crome中运行我的代码时,对于大屏幕忽略引导容器宽度为1400px

 @media (min-width: 1200px){
.container {
width: 1170px;}
}

和这个

.container{
width: 940px;
}

但是当我在IE8中运行我的代码时,它会选择引导容器宽度

.container{
width: 940px;
}

并忽略

@media handheld, only screen and (min-width: 1440px){
{.container:1400px;} 
}

问题是我希望explorer 8不要忽略我的大屏幕代码(1400px)。我知道我无法在我的“explorer.css”中将其添加为媒体查询中的媒体查询。我知道它不起作用。

/* IE8 */
@media \0screen
{
@media handheld, only screen and (min-width: 1440px){
.container:1400px;}

}

所以我决定在这个

上添加!important
@media handheld, only screen and (min-width: 1440px){
{.container:1400px !important;}
}

因此它开始具有我想要的大屏幕尺寸,但现在它调整速度非常慢(由于css3-mediaqueries.js工作缓慢)并且没有显示移动设计。所以现在我的问题是 css3-mediaqueries.js支持移动?感谢您的帮助。

0 个答案:

没有答案