Css3 媒体查询仅在 <head> 标签内工作答案

【问题标题】：Css3 Media Queries only work inside <head> tagCss3 媒体查询仅在 <head> 标签内工作
【发布时间】：2012-11-14 20:54:12
【问题描述】：

我已经用谷歌搜索了两天但找不到答案....问题只是在 IE8 中所有其他浏览器都很好......我正在使用以下 Js 文件来支持媒体查询IE8：

css3-mediaqueries.js
html5.js

问题是媒体查询在外部样式表中不起作用，但是当我将它们放在 html 文件的头部部分时，它们开始正常工作。该网站是Wordpress。任何帮助都会很棒。

我的媒体查询代码是：

@media only screen and (min-width: 769px) and (max-width:1075px) {
    #wrap {
        width:100%;
        max-width:98%;
    }
}
@media \0screen {
    img { 
        width: auto; /* for ie 8 */
    }
}
@media only screen and (min-width: 600px) and (max-width:768px) {
    #wrap {width: 100%;}
    .grid {padding: 0;}
    #contentleft {width: 100%;}
    .grid > aside {float: none; margin: 0; width: auto; }
    #contentright {float: none;}
}

【问题讨论】：

标签： html css media-queries

【解决方案1】：

尝试在你的 head 标签中设置一个空的样式标签。

 <style></style>

我在链接 rel 样式表中声明的媒体查询有问题，这为我解决了问题。

【讨论】：

也有类似的问题，<link rel="stylesheet"... - 最终只使用<style>@import(...)</style> 并且它有效，虽然我不熟悉那些特定的 js 库。
在我的 head 标签中添加一个空样式标签并不能解决问题。我无法理解，如果我将媒体查询放在 head 标记中，它们可以正常工作，而相同的媒体查询在 style.css 中它们不起作用，即使是仅用于媒体查询的单独样式表也不起作用。