正文 

当前位置： 首页 > 问答 >

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

     2023-03-06     139

关键词：

【中文标题】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>

【讨论】：

以上工作的要点::

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

】IE8的媒体查询站点问题[重复]【英文标题】：MediaQuerySiteIssuewithIE8[duplicate]【发布时间】：2014-01-2815:55:38【问题描述】：我目前有一个网站，我继承了代码，但它似乎没有为IE8正确加载媒体查询。respond.js脚本正在正确加载，因... 查看详情

ie8实现媒体查询

...现不同分辨率样式的兼容，需要用Css3中的media,可是IE8不支持@media啊翻不出去，那找度娘果然找到了一个Demo测试一下，IE8媒体查询也不是多难1、下载Respond2、找到Respond文件中的respond.src.js3、已测试Demo为例依次创建Index.html、Index.c... 查看详情

IE8：让“nth-child”选择器在媒体查询中工作？

...我的网站项目中，我使用媒体查询和nth-child选择器。IE8不支持开箱即用，但有一些polyfill可以提供帮助：Respond.js、mediatizr或css3-mediaquerie 查看详情

基于 IE8 和 REM 的媒体查询

...1-0809:11:46【问题描述】：我希望我的媒体查询基于REM，以支持用户进行各种浏览器缩放和/或基本/浏览器字体大小调整。理想情况下到IE8。加载jQuery、HTMLshiv、Respond和REMpolyfill，结果REMpolyfill不支持媒体查询。虽然不太明白为什么... 查看详情

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

】我需要一种使用jquery检测CSS3媒体查询支持的简单方法【英文标题】：IneedaneasywaytodetectCSS3mediaquerysupportusingjquery【发布时间】：2012-11-1921:11:03【问题描述】：我需要一种快速而肮脏的方法来使用jquery检测媒体查询支持。我定义... 查看详情

ie7,ie8不支持document.getelmentsbyclassname的问题

1if(!document.getElementsByClassName){2document.getElementsByClassName=function(className,element){3varchildren=(element||document).getElementsByTagName(‘*‘);4varelements=newArray();5for(vari=0;i<c 查看详情

Modernizr.load 在 IE7/IE8 中不提供输入和文本区域占位符支持

】Modernizr.load在IE7/IE8中不提供输入和文本区域占位符支持【英文标题】：Modernizr.loadnotprovidinginputandtextareaplaceholdersupportinIE7/IE8【发布时间】：2012-03-1020:03:37【问题描述】：我正在使用MathiasBynens相当不错的jQueryplaceholderplugin在本身... 查看详情

SASS 3.2 媒体查询和 Internet Explorer 支持

】SASS3.2媒体查询和InternetExplorer支持【英文标题】：SASS3.2MediaQueriesandInternetExplorerSupport【发布时间】：2012-05-2404:28:21【问题描述】：我最近在我一直从事的项目中使用@content块在SASS3.2中实现了thistechnique，并且我刚刚到了需要包括... 查看详情

我如何使用 javascript 在 IE7、IE8、Safari 和其他支持的浏览器中播放 .Wav 声音

】我如何使用javascript在IE7、IE8、Safari和其他支持的浏览器中播放.Wav声音【英文标题】：howIplay.WavsoundinIE7,IE8,Safariandothersupportedbrowserusingjavascript【发布时间】：2013-04-0406:11:17【问题描述】：成功后我需要播放.Wav声音。我试过这个... 查看详情

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

】如何在Firefox中禁用媒体查询支持？【英文标题】：Howtodisablemediaqueriessupportinfirefox?【发布时间】：2013-06-0203:12:57【问题描述】：我有一个广泛使用CSS3媒体查询的移动网站。我想为不支持媒体查询的浏览器创建一个版本，为它... 查看详情

关于ie8ie7不支持getelementsbyclassname的结局方案

复制此代码到<header></header><!--[ifIE8]>　　<scripttype="text/javascript">　　　　if(!document.getElementsByClassName){　　　　　　document.getElementsByClassName=function(className,element){　　 查看详情

CSS3 + HTML5SHIV + CSS3PIE Border-radius 不适用于 IE8，但适用于 IE7、9、10

】CSS3+HTML5SHIV+CSS3PIEBorder-radius不适用于IE8，但适用于IE7、9、10【英文标题】：CSS3+HTML5SHIV+CSS3PIEBorder-radiusNOTworkingonIE8butworkingonIE7,9,10【发布时间】：2013-05-1313:47:26【问题描述】：我正在使用的网站-http://www.quickseorankings.com/dev/，其... 查看详情

IE8 Browser Bootstrap 仅在响应模式下工作 [重复]

...讨论】：但是我也试试这个方法。这是行不通的我确信不支持媒体查询会导致您的问题。您至少应该分享您的代码以获 查看详情

header/footer/nav 标签——在 IE7、IE8 和不支持 HTML5 的浏览器中会发生啥？

】header/footer/nav标签——在IE7、IE8和不支持HTML5的浏览器中会发生啥？【英文标题】：header/footer/navtags-whathappenstotheseinIE7,IE8andbrowsersthandon\'tsupportHTML5?header/footer/nav标签——在IE7、IE8和不支持HTML5的浏览器中会发生什么？【发布时... 查看详情

通过media媒体查询设置ie7/8样式

@mediaalland(min-width:1280px){/*所有设备宽度大于1280干嘛干嘛嘞...*/body{background:#f00;}}@media(min-width:1280px){/*所有设备宽度大于1280干嘛干嘛嘞...*/body{background:#f00;}}其中alland可省略@mediaprint{/*打印时设置的样式*/body{background 查看详情

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

  众所周知，网页前端开发时兼容IE一直是很头疼的问题。今天接到一个需要响应式布局的问题，主要还要兼容IE8，9。在网上搜索了以下解决方案，现记录如下。 首先，加入代码 <!--[ifltIE9]><scriptsrc="http://css... 查看详情

在 IE7/IE8 中使用 :not() 伪类

...类在InternetExplorer7/8中工作？是否有任何javascript可以做与CSS3:not()相同的事情？【问题讨论】：【参考方案1】：或者您可以使用DeanEdwardsIE7.js【讨论】：【参考方案2】：是的，就 查看详情

如何在 CSS 3 媒体查询中使用 SASS 逻辑 [重复]

】如何在CSS3媒体查询中使用SASS逻辑[重复]【英文标题】：HowtouseSASSlogicwithinaCSS3mediaquery[duplicate]【发布时间】：2011-07-1510:12:43【问题描述】：我通过compass框架和蓝图/网格依赖项使用saas。我希望能够使用媒体查询设置列的宽度，... 查看详情