@import trong @media không làm việc trong Firefox 3.0.3

Question

Đây là những gì tôi có, mà làm việc trong IE7, nhưng không phải trong Firefox:

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

Nó hoạt động bên ngoài của khối @media trong Firefox:

@import 'screen.css'; 

UPDATE:

này hoạt động:

@media screen { 

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

} 

Tôi đang thiếu gì?

Answer 1

Firefox là theo đặc tả CSS2, trong khi IE đang chơi nhanh và lỏng lẻo, như nó đã được.

Lý do chính xác là chỉ thị @import phải là chỉ thị đầu tiên sau chỉ thị @charset tùy chọn. Chúng không thể xuất hiện bên trong bất kỳ khối nào. Nếu bạn muốn một @import chỉ áp dụng cho một loại phương tiện, hãy chỉ định điều đó sau URI đã nhập.

Đây là phần thích hợp của đặc tả CSS2: 6.3 The @import rule.

Answer 2

Ok, vì vậy Firefox không thích phương pháp tôi đã chọn, ủng hộ:

@import 'stylesheet.css' media_type; 

Nhưng IE7 không hiểu phương pháp này, nhưng điều này có thể là tốt:

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