忽略 Firefox 中特定于 Webkit 的 CSS 选择器

Question

我正在开发一个 jQuery 主题，其中包含尽可能多的表单元素的样式。 最初它是为 Webkit (Chrome) 开发的。现在我想让它也适用于 Firefox。

问题是； Firefox 在某些特定于 Webkit 的语法方面存在问题。

例如：

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}

问题在于input[type="range"]::-webkit-slider-thumb, 位。删除它，Firefox 就可以正常工作了。它也为其他语法（如 ::-webkit-file-upload-button、::selection 和所有其他使用 ::-webkit-... 标签的东西）执行此操作。它可以识别它自己的 ::-moz-... 标签，例如 ::-moz-selection 就好了。

Webkit 似乎只是忽略了 ::-moz- 标签。

有没有什么方便的方法可以让 Firefox 忽略 ::-webkit-... 标签或以其他方式处理这个问题，而不必维护每个 CSS 块的多个副本？

使用最新版本的 Chrome 和 Firefox。

Answer 1

我必须阅读一点才能回答这个问题，这里有一些很好的资源， Gecko Style Engine Further Reading on the Engine Implementation，我仍然没有看到任何指示它为什么会丢弃它，但我可以给你我最好的猜测，我认为引擎正在丢弃整个选择器，假设 mozilla 实现 -moz-slider-thumb伪选择器并尝试将它与 -webkit- 一起使用，它也会被丢弃。

我以前在所有浏览器中都看到过这种行为，我认为它有时被用作针对某些浏览器的黑客攻击。

这会起作用

input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

这不会

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

或者这个

input[type="range"]::-moz-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

我认为您将不得不重写两个或多个不同选择器的属性值，这只会影响样式表的大小，因为引擎会不断丢弃它们不拥有的选择器。

我真的希望这至少能有所帮助。

编辑：

正如用户 @BoltClock 在 cmets 中指出的那样，我的猜测是正确的，这是指向规范 w3.org/TR/css3-syntax/#rule-sets 的链接

Answer 2

仅供参考，我最终选择了不同的解决方案。

由于我的最终产品是样式表，因此我决定使用 CSS 编译器根据源文件生成 .CSS 文件。到目前为止一切正常。

我使用了LessPHP，因为 .less 格式相当流行，而且我熟悉 PHP，但其他任何格式都可以。

请注意，我使用 LessPHP 仅用于编译静态 .CSS 文件，因此除非他们想自己更改 .less 源文件，否则此项目的最终用户不需要它。

Answer 3

不幸的是，如果不复制声明块是不可能的，因为CSS spec stipulates 浏览器在遇到 CSS 规则中无法识别的选择器时必须这样做：

选择器包含（但不包括）第一个左花括号 ({) 之前的所有内容。选择器总是与 {} 块一起使用。当用户代理无法解析选择器时（即它不是有效的 CSS3），它也必须 ignore {} 块。

在这种情况下，一个供应商的浏览器无法识别另一个供应商的前缀，因此它必须忽略该规则。