css - IE 中的媒体查询

Question

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

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

谢谢

Answer 1

https://github.com/scottjehl/Respond

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

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