IE中的媒体查询

Question

我的响应站点和IE9浏览器出现了问题，我想知道是否有人可以看看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版本编写不同的css

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