Question

我有一个自定义断点为990px的导航栏，在此点之后它会崩溃。导航栏在现代浏览器中运行良好，但在IE8中却没有。我的HEAD中确实有respond.js和html5shiv polyfill，所以我不确定为什么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>

Answer 1

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

IE8不支持拳击模型，因此属性盒装不能与max-heigth，min-height，min-width和max-width结合使用。

检查您是否遇到其中一个问题，并查看Respond.js文档

Answer 2

您的媒体查询似乎无法在IE8中运行。

因此，请使用css3-mediaqueries-js代替respond.js。

将此代码放在头标中。

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

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

Answer 1

Answer 2

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

2 个答案: