logo标签列表

IE7和IE8对CSS3媒体查询的支持情况

cssinternet-explorer-8internet-explorer-7media-queries
3

我已经尝试过：

@media screen and (max-width:1024px) {
.sidebar{width:630px;}
}

我尝试获取修复IE7和8的方法，但它并没有起作用，而对于IE9和其他浏览器则有效。是否有不同的编写方式？我也尝试了包括css3mediaqueries js但仍未成功。 在IE7和IE8中是否有任何支持呢？

5个回答
30

在 <head> 中包含此元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8或更早版本不支持媒体查询。您可以使用media-queries.js或respond.js在IE中添加媒体查询支持。 

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

我认为这两个链接可以帮助你：

更新：

css3-mediaqueries-js已经移到Github。

3
一般来说，解决这个问题的步骤是结合JS插件、条件注释和测试环境。 我已经成功地使用respond.js来支持媒体查询，你可以从github上下载它。 - 使用条件注释避免在现代浏览器中添加此项。
<!--[if lt IE9]>
<script src="..directory-path/respond.js">
<![endif]-->

根据您对支持CSS3的详细程度的要求，您可能需要设置PIE.htc - css3pie.com

最后，为了更好地掌握问题和结果，请查看浏览器测试选项：

设置虚拟机 - https://modern.ie/en-us/virtualization-tools#downloads - 这对我来说是一种非常成功的方法，我认为这是最可靠的方法。

Browserstack - 您可以设置一个30天的试用账户；这是一个不错的工具，但像之前一样，它不如虚拟机可靠。

2

<!DOCTYPE html>
<html>

<head>
  <title>New Page 1</title>
  <meta name=viewport content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <style>
    body {
      background-color: #FFF;
      color: #000;
      font: 1.1em/2.0em Arial, Helvetica, sans-serif;
      height: 100%;
      margin: 0;
      padding: 0;
      width: 100%;
    }
    #outer {
      border: 1px solid red;
      margin: 1% auto;
      padding: 10px;
      max-width: 1000px;
      min-width: 310px;
      text-align: center;
    }
    .box {
      border: 1px solid green;
      display: inline-block;
      float: left;
      padding: 1%;
      text-align: left;
      width: 310px;
      0
    }
    .clear {
      clear: both;
    }
    @media screen and (max-width: 1030px) {
      #outer {
        width: 660px;
      }
    }
    @media screen and (max-width: 550px) {
      #outer {
        width: 320px;
      }
    }
  </style>
  <!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body>
  <div id="outer">

    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>

    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>

    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>

    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


    <div class="box">
      <p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
    </div>


















    <div class="clear"></div>
  </div>
  <!-- outer -->
</body>

</html>

以上工作的重要要点： - evan toder
1
我还没有尝试过css3-mediaqueries.js！也许你可以试试respond.js。这个插件实际上支持IE6-8，它们原生不支持媒体查询（请参阅Can I use ...）。
无论如何，为什么现在还要支持IE7呢？ 每个仍在运行IE7的系统都可以升级到IE8。而且，对于现代CSS3布局特性（如Flexbox）的回退，由于IE8支持"display: table-xy"（IE7不支持），所以更容易实现。
就个人而言，我不会为基本布局使用任何Shims / Polyfills，因为我认为让CSS布局依赖于Javascript支持是适得其反的。
尊敬的，即使是respond.js也无法正常工作。我继续寻找解决方法。 - guyan
你在HTML文档中如何加载/集成CSS样式表和respond.js脚本？你是否确保Media Query内的样式不会被其他样式覆盖？ - Netsurfer
我正在编写以下代码：<header> <style> @media screen and (max-width:1024px) { #sidebar{ float:left; margin: 10px 0px 0px 10px; width:630px; }}</style><script src="rspond.js"></script> </header> <body> - guyan
1
好的，那就是问题所在... ;-) 引用：“Respond.js无法解析通过@import引用的CSS，也无法与style元素内的媒体查询一起使用，因为这些样式不能被重新请求以进行解析。” 请尝试使用link元素包含您的外部CSS文件。然后脚本应该可以正常工作。 - Netsurfer
无论如何，为什么你现在还要支持IE 7呢？有时候这并不是我们自己决定的，而是来自上级的“命令”… - Andre Figueiredo
显示剩余3条评论
0
据我所知，媒体查询在IE7和IE8中不受支持。
请参见此处。
刚发现了这个线程，可能有解决方法。
原帖在这里：IE8支持CSS媒体查询吗。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接