在 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

不幸的是，正如 CSS 规范所规定的那样，如果不复制声明块，这是不可能的 当遇到 CSS 规则中无法识别的选择器时，浏览器必须这样做：

选择器由直到（但不包括）第一个左大括号 ({) 的所有内容组成。选择器始终与 {} 块一起使用。当用户代理无法解析选择器（即，它不是有效的 CSS3）时，它必须 也忽略 {} 块。

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

Answer 2

我必须阅读一点才能回答这个问题，这里有一些很好的资源，
Gecko 风格引擎 进一步阅读引擎实现，我仍然没有看到任何指示为什么它会放弃它，但我可以给你我最好的猜测， 我认为引擎正在删除整个选择器，假设 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在评论中指出的，我的猜测是正确的，这里是规范的链接 w3.org/TR/css3-syntax/#rule-sets

Answer 3

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

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

我使用过 LessPHP 因为 .less 格式相当流行，而且我熟悉 PHP，但是其他的也可以。

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