Css 引导程序3:Navbar和IE8不尊重respond.js？_Css_Internet Explorer 8_Twitter Bootstrap 3_Media Queries

Css 引导程序3:Navbar和IE8不尊重respond.js？

css internet-explorer-8 twitter-bootstrap-3

Css 引导程序3:Navbar和IE8不尊重respond.js？,css,internet-explorer-8,twitter-bootstrap-3,media-queries,Css,Internet Explorer 8,Twitter Bootstrap 3,Media Queries,我有一个自定义断点为990px的导航栏，它将在该断点后崩溃。导航栏在现代浏览器中运行良好，但在IE8中却不行。我脑子里确实有respond.js和html5shiv polyfills，所以我不确定IE8为什么不尊重我的NAVBAR媒体查询。有人知道发生了什么事吗导航栏的HTML代码： <header class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="log

我有一个自定义断点为990px的导航栏，它将在该断点后崩溃。导航栏在现代浏览器中运行良好，但在IE8中却不行。我脑子里确实有respond.js和html5shiv polyfills，所以我不确定IE8为什么不尊重我的NAVBAR媒体查询。有人知道发生了什么事吗

导航栏的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>


试验场地

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

IE8不支持装箱模型，因此属性框装箱不能与最大高度、最小高度、最小宽度和最大宽度组合

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

您的媒体查询在IE8中似乎不起作用

因此，使用

css3mediaQueriesjs

而不是

respond.js

把这个代码放在你的头上

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

此外，您还可以检查这两个答案

你能帮我贴上你的头标签吗？这样我们就可以看到你已经正确地添加了polyfills。只是添加了头标签尝试了，没有解决问题：（我认为media.js中可能存在版本问题。我已经有了该js的最新版本，并将该代码放在了jsfiddle：：另外，这次将respond.js与新媒体一起使用。jsI研究了这一点，似乎一切都正常，所以IE8似乎不尊重该代码：@media（max width:991px）{desktopNav{display:none；}

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