Question

我试过了：

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

获取IE7和8的修复，但它不起作用，因为它适用于IE9和其他浏览器。有没有不同的写作方式。我试图包括css3mediaqueries js但没有成功。 IE7和IE8是否有任何支持？

Answer 1

在＆lt; head＆gt;。

中加入此元标记

<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

Answer 2

通常，要解决的步骤是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那么可靠。

Answer 3

＆＃13;

<!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>

＆＃13;

Answer 4

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

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

我个人不会使用任何Shims / Polyfill进行基本布局，因为在我看来，根据Javascript支持制作CSS布局会适得其反。

Answer 5

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

请参阅here

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

此处的原帖：IE8 support for CSS Media Query

IE7，IE8支持css3媒体查询

5 个答案: