IE 中的媒体查询答案

【问题标题】：Media Queries in IEIE 中的媒体查询
【发布时间】：2013-02-18 17:18:24
【问题描述】：

我的响应式网站和 Internet Explorer 出现问题（请看图），我想知道是否有人可以查看 nickpassaro.com 标题中的源代码并帮助我找出 IE9 和 IE8 的原因工作不正常。我不确定这是否是我的 css 的问题，因为我的所有三个样式表都通用的某些属性不起作用（例如标题的背景）。

我使用 html5shiv 作为我的 polyfill，它不是来自我服务器上的本地副本。我也在使用 normalize.css，它说它适用于 IE8+

谢谢

【问题讨论】：

我为 IE9 声明了一个 html 的 doctype，它现在可以工作了，但是 IE8 不接受 shiv

标签： css internet-explorer media-queries

【解决方案1】：

https://github.com/scottjehl/Respond

如果您正在寻找更强大的 CSS3 媒体查询支持，您可以查看http://code.google.com/p/css3-mediaqueries-js/。在测试中，我发现该脚本在渲染复杂的响应式设计（文件大小和性能方面）时明显变慢，但它确实支持比该脚本更多的媒体查询功能。给作者的大礼帽！ :)

【讨论】：

【解决方案2】：

有两种不同的方法，你可以使用一些 jquery 或 JS 用于像这样的 IE 版本

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

或者你可以像这样为不同的 IE 版本编写不同的 css 适用于所有版本的 IE

 <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

针对特定版本

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

【讨论】：

通过浏览器检查 IE 是否真的弊大于利。为了使您的代码面向未来（并且由于 IE10 的互操作性非常出色，因此也能够适应当前），您应该针对您想要使用的特定 CSS 功能使用功能检测。您可以使用modernizr.com 来简化此操作。这不仅会检查旧的 IE 版本，还会检查其他非主流浏览器，让您的网站在更多平台上看起来更好。