浏览器对 CSS 中嵌套 @media 规则的支持有多一致？

在 CSS 中嵌套 @media 规则：浏览器支持和兼容性

问题：

如何不同浏览器对嵌套 @media 规则的支持是否一致？为什么提供的代码在不同浏览器中显示不同，这种不一致背后的原因是什么？可以解决此问题以实现一致的样式吗？

答案：

浏览器支持

嵌套 @media 规则不是CSS2.1 中的有效实践，这就是为什么浏览器对此功能的支持差异很大的原因。然而，随着 CSS Conditional 3 的引入，嵌套 @media 规则成为所有现代浏览器支持的功能，包括 Firefox、Safari、Chrome 和 Microsoft Edge。

嵌套兼容性

问题中提供的代码涉及嵌套@media规则。虽然 @media 规则可以嵌套在 CSS3 中的其他 @media 规则中，但 CSS2.1 中不允许这种嵌套。因此，仍然遵循 CSS2.1 的浏览器（例如旧版本的 Internet Explorer）无法正确处理嵌套 @media 规则。

不一致的原因

Firefox实现了较新的 CSS Conditional 3 规范，允许其按预期解释和应用嵌套 @media 规则。另一方面，其他浏览器（例如 Opera、Chrome 和 IE9）遵循较旧的 CSS2.1 规范，该规范不支持嵌套 @media 规则。因此，他们会回退到应用最里面的@media规则中定义的样式，从而导致样式上的差异。

实现一致性

确保整个样式的一致性所有浏览器，建议删除嵌套的@media规则。这可以通过删除第一个 @media 规则中的第二个 @media 规则来完成：

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }

    @media screen and (min-width: 768px) {  // Remove this nested rule
        body {
            background-color: #000;
            color: #fff;
        }
    }
}

删除嵌套规则后，样式应在支持 CSS Conditional 3 和 CSS2 的所有现代浏览器中一致应用。 1.

以上是浏览器对 CSS 中嵌套 @media 规则的支持有多一致？的详细内容。更多信息请关注PHP中文网其他相关文章！