This is what I have, which works in IE7, but not in Firefox:
@media screen { @import 'screen.css'; }
It works outside of the @media block in Firefox:
@import 'screen.css';
UPDATE:
This works:
@media screen {
.yui-d3f
{
border: 1px solid #999;
height: 250px;
}
}
What am I missing?
Firefox is following the CSS2 specification, while IE is playing fast and loose, as it were.
The exact reason is that @import
directives must be the first directives after the optional @charset
directive. They cannot appear inside of any block. If you want an @import
to apply to only one media type, specify that after the imported URI.
Here is the pertinent section of the CSS2 specification: 6.3 The @import
rule.
Ok, so Firefox doesn't like the method I chose, favouring:
@import 'stylesheet.css' media_type;
But IE7 doesn't understand this method, but this could be good:
@import 'firefox-screen.css' screen;
@media screen { @import 'IE7-screen.css'; }
来源:https://stackoverflow.com/questions/223833/import-in-media-not-working-in-firefox-3-0-3