@media 中的 @import 在 Firefox 3.0.3 中不起作用答案

【问题标题】：@import in @media not working in Firefox 3.0.3@media 中的 @import 在 Firefox 3.0.3 中不起作用
【发布时间】：2010-09-18 10:32:36
【问题描述】：

这是我所拥有的，在 IE7 中有效，但在 Firefox 中无效：

@media screen { @import 'screen.css'; }

它在 Firefox 中的 @media 块之外工作：

@import 'screen.css';

更新：

这行得通：

@media screen { 

    .yui-d3f
    {
        border: 1px solid #999;
        height: 250px;
    }

}

我错过了什么？

【问题讨论】：

【解决方案1】：

Firefox 遵循 CSS2 规范，而 IE 则玩得又快又松。

确切的原因是@import 指令必须是可选的@charset 指令之后的第一个指令。它们不能出现在任何块内。如果您希望 @import 仅应用于一种媒体类型，请在导入的 URI 之后指定。

这是 CSS2 规范的相关部分：6.3 The @import rule。

【讨论】：

【解决方案2】：

好的，所以 Firefox 不喜欢我选择的方法，赞成：

@import 'stylesheet.css' media_type;

但是 IE7 不理解这个方法，但这可能是好的：

@import 'firefox-screen.css' screen;
@media screen { @import 'IE7-screen.css'; }

【讨论】：