忽略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），它也必须忽略{}块。

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