3

我努力了 ：

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

获得 IE7 和 8 的修复程序，但它不起作用，因为它适用于 IE9 和其他浏览器。有没有不同的写法。我也尝试包含 css3mediaqueries js，但没有成功。是否对 IE7 和 IE8 有任何支持？

4

5 回答 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 上

于 2013-09-10T04:30:05.667 回答
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 天；这是一个很好的工具，但和以前一样，它不如 VM 可靠。

于 2014-09-12T04:07:58.670 回答
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>

于 2015-05-15T15:44:51.590 回答
1

我还没有尝试过 css3-mediaqueries.js！也许你试试response.js。这实际上适用于本机不支持媒体查询的 IE 6-8（请参阅Can I use ...）。

无论如何，为什么你现在仍然支持 IE 7？每个仍在运行 IE 7 的系统都可能会更新到 IE 8。此外，现代 CSS3 布局功能（如 Flexbox）的回退更容易，因为 IE 8 支持“display: table-xy”（IE 7 不支持） .

就我个人而言，我不会将任何 Shims/Polyfills 用于基本布局，因为在我看来，根据 Javascript 支持来制作 CSS 布局会适得其反。

于 2013-08-13T09:50:52.623 回答
0

据我所知，我认为 IE7 和 IE8 不支持媒体查询。

看这里

刚刚遇到这个帖子，可能有解决方法。

原帖：IE8 对 CSS 媒体查询的支持

于 2013-08-13T09:47:42.063 回答