0

我正在尝试使用 @import 样式媒体查询包含浏览器特定的 CSS，如下所示：

<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>

foo.css 然后有：

.myStyle { -moz-box-sizing: border-box; }

我的想法是我将包含用于 Firefox (Gecko/Mozilla) 浏览器的 foo.css。但是，看起来 foo.css 从未应用于 Firefox。所以：

  1. 如何在 Firefox 中调试 @import 媒体查询未评估为真的原因。我已经通过“InspectQ”进行了检查，以确保 -moz-box-sizing 确实是我正在使用的浏览器中的上下文框。但无论出于何种原因，该媒体查询表达式显然正在评估为假。我可以使用什么工具在运行时查看该评估。

  2. 有没有人看到那个媒体查询有什么问题？

  3. 有没有更常见的方法来使用@import 风格的媒体查询来检测 Mozilla 浏览器？

4

1 回答 1

1

媒体查询规范定义了一组您可以使用的特定媒体功能。尽管语法类似于属性声明，但您不能将任意 CSS 属性用作媒体功能，因为它不一定有意义。例如，-moz-box-sizing在媒体查询中应该意味着什么，甚至对于 Mozilla 浏览器？

在您的情况下，由于只有 Mozilla 浏览器才能理解-moz-前缀，您可以直接将您的 CSS 规则放在您的主样式表中，而无需任何条件导入。

于 2013-01-12T09:48:39.993 回答