忽略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规则中无法识别的选择器时必须采用这种方式:

选择器包含第一个左大括号({)的所有内容(但不包括).选择器总是与{} -block一起使用.当用户代理无法解析选择器时(即,它不是有效的CSS3),它也必须忽略 {} -block.

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

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的链接