ie8 上的引导程序 3，忽略媒体查询答案

【问题标题】：bootstrap 3 on ie8, ignores media queryie8 上的引导程序 3，忽略媒体查询
【发布时间】：2015-07-02 16:50:24
【问题描述】：

我有一个在 ie8 中看起来很糟糕的网站。我包含了 html5shiv.js 和 respond.js，这使它看起来更好，但它没有扩展或使用媒体查询。知道为什么吗？

【问题讨论】：

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

【解决方案1】：

要使 Bootstrap 与不支持 @media-query 的 IE 版本兼容，应添加（在 head 中）：

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

确保该标签存在（在head中）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

因为

旧的 Internet Explorer 兼容模式不支持 Bootstrap。为确保您使用的是最新的 IE 呈现模式，请考虑在您的页面中包含适当的标签

并使用

<!DOCTYPE html>

正确页面示例

<!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>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

【讨论】：

确定您已输入所有必需的标签？我在 IE-8 上也遇到了媒体查询的问题，但是添加标签和脚本已经解决了所有报告的问题。