Bootstrap 3：Navbar和IE8不尊重response.js吗？

Question

我有一个导航栏，其自定义断点为990px​​，在该断点之后它将折叠。 导航栏在现代浏览器中可以正常工作，但在IE8中则不能。 我的头上确实有response.js和html5shiv polyfills，所以我不确定IE8为什么不尊重我的NAVBAR媒体查询。 有谁知道发生了什么吗？

我的演示在这里。

@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display:block !important;
}
}

@media (max-width: 991px) {
#desktopNav {
display: none;
}
}

 @media (min-width: 992px) {
#mobileNav {
display: none;
}
}

导航栏的HTML代码：

<header class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="logo"><a href="#"><img src="http://placehold.it/222x102" width="222" height="102"></a></h1>
<nav id="mobileNav" class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobileNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="mobileNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</nav>
<nav id="desktopNav" role="navigation">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products and Services</a></li>
<li><a href="#">Showcase</a></li>
<!--          <li><a href="#">About</a></li>-->
<li><a href="#">Order Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<!--/.col-lg-12--> 
</div>
<!--/.row--> 
</header>

头标签：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Site</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
 <!-- css here -->
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

Answer 1

Respond.js具有IE8的已知问题。 您不能在IE8和Respond.js上使用@import语句。 如果您的CSS位于CDN上，则需要执行其他设置步骤以使Respond.js与IE8一起运行。

IE8不支持装箱模型，因此属性装箱不能与最大高度，最小高度，最小宽度和最大宽度结合使用。

检查您是否遇到了这些问题之一，请参阅Respond.js文档

Answer 2

看来您的媒体查询在IE8中不起作用。

因此，使用css3-mediaqueries-js ，而不是respond.js 。

将此代码放在您的head标签中。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

另外，您也可以检查这两个答案。

答案1

答案2