Bootstrap 3：导航栏和 IE8 不尊重 respond.js？答案

【问题标题】：Bootstrap 3: Navbar and IE8 not respecting respond.js?Bootstrap 3：导航栏和 IE8 不尊重 respond.js？
【发布时间】：2014-09-12 16:36:10
【问题描述】：

我有一个自定义断点为 990px 的导航栏，在该断点之后它将折叠。导航栏在现代浏览器中运行良好，但在 IE8 中却不行。我的 HEAD 中确实有 response.js 和 html5shiv 填充，所以我不确定为什么 IE8 不尊重我的 NAVBAR 媒体查询。有人知道发生了什么吗？

My demo is here.

@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>

【问题讨论】：

你能帮我张贴你的头部标签，这样我们就可以看到你正确地放入了polyfills。
刚刚添加了head标签

标签： css internet-explorer-8 twitter-bootstrap-3 media-queries

【解决方案1】：

Respond.js 已知 IE8 存在问题。您不能在 IE8 和 Respond.js 上使用 @import 语句。如果你的 css 在 CDN 上，你需要执行额外的设置步骤来让 Respond.js 在 IE8 上运行。

IE8 不支持装箱模型，所以属性 box-boxing 不能与 max-heigth、min-height、min-width 和 max-width 组合使用。

检查您是否遇到这些问题之一，并查看 Respond.js 文档

【讨论】：

我对此进行了调查，一切似乎都很好，所以似乎 IE8 不尊重此代码：@media (max-width: 991px) { #desktopNav { display: none; } }

【解决方案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]-->

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

Answer 1

Answer 2

【讨论】：

试过了，没解决问题:(
我认为可能是 media.js 中的版本问题。我有该 js 的最新版本并将该代码放在 jsfiddle 上：jsfiddle.net/eE25U：此外，这次使用 respond.js 和这个新的 media.js