IE7、IE8支持css3媒体查询[重复]

Posted 2023-03-06

技术标签:

【中文标题】IE7、IE8支持css3媒体查询[重复]【英文标题】：IE7, IE8 support for css3 media query [duplicate] 【发布时间】：2013-08-14 20:13:18 【问题描述】：

我试过了：

@media screen and (max-width:1024px) 
.sidebarwidth:630px;

获得 IE7 和 8 的修复程序，但它无法正常工作，因为它适用于 IE9 和其他浏览器。有没有不同的写法。我也尝试包含 css3mediaqueries js，但没有成功。 IE7和IE8都支持吗？

【问题讨论】：

【参考方案1】：

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

见here

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

原帖在这里：IE8 support for CSS Media Query

【讨论】：

【参考方案2】：

我还没有尝试过 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/Polyfills 用于基本布局，因为在我看来，根据 javascript 支持来制作 CSS 布局会适得其反。

【讨论】：

恕我直言，即使 response.js 也无法正常工作。我继续寻找修复方法。在哪里以及如何在 html 文档中加载/集成 CSS 样式表和 respond.js 脚本？您确定媒体查询中的样式不会被其他样式覆盖吗？我这样写：

嗯，这就是问题所在...... ;-) 引用：“Respond.js 不解析通过 @import 引用的 CSS，也不适用于样式元素中的媒体查询，因为这些样式可以不会被重新请求解析。”尝试使用 link 元素包含您的 external CSS 文件。然后脚本应该可以工作了。 "不管怎样，为什么现在你还支持 IE 7？"好吧，有时不是我们来定义这个，它只是“来自上面的命令”..【参考方案3】：

在

中包含此元标记。

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

我认为这两个链接会对你有所帮助。

http://cssmatter.com/blog/ie7-and-ie8-support-for-css3-media-query/ http://webdesignerwall.com/tutorials/responsive-design-in-3-steps/comment-page-2

更新

css3-mediaqueries-js 移到github

【讨论】：

【参考方案4】：

一般来说，解决的步骤是JS插件、条件cmets和测试环境的组合。

我已经成功使用respond.js 来支持媒体查询，你可以从github 下载。 - 使用条件 cmets 避免在现代浏览器中添加它

<!--[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 可靠。

【讨论】：

【参考方案5】：

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

【讨论】：

以上工作的要点::

以上是关于IE7、IE8支持css3媒体查询[重复]的主要内容，如果未能解决你的问题，请参考以下文章

css3 media媒体查询器用法总结兼容ie8以下的方法

IE8的媒体查询站点问题[重复]

我需要一种使用 jquery 检测 CSS3 媒体查询支持的简单方法

解决媒体查询的响应式布局

如何在 Firefox 中禁用媒体查询支持？

CSS3媒体查询总结