忽略 Firefox 中特定于 Webkit 的 CSS 选择器
我正在开发一个 jQuery 主题，其中包含尽可能多的表单元素的样式.最初它是为 Webkit (Chrome) 开发的.现在我想让它也适用于 Firefox.
I'm working on a jQuery theme which includes styling for as many form elements as possible. Initially it was developed for Webkit (Chrome). Now I want to make it work with Firefox as well.
问题是；Firefox 在某些特定于 Webkit 的语法方面存在问题.
Problem is; Firefox has problems with some Webkit-specific syntax.
例如:
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 就好了.
The problem is the input[type="range"]::-webkit-slider-thumb, bit. Remove it and Firefox works fine. It also does this for other syntax like ::-webkit-file-upload-button, ::selection and all other things using the ::-webkit-... labels. It recognizes it's own ::-moz-... labels, like ::-moz-selection just fine though.
Webkit 似乎只是忽略了 ::-moz- 标签.
Webkit seems to just ignore the ::-moz- labels.
有没有什么方便的方法让 Firefox 忽略 ::-webkit-... 标签或以其他方式处理这个问题，而不必维护每个 CSS 块的多个副本?
Is there any convenient way to make Firefox ignore the ::-webkit-... labels or otherwise deal with this problem without having to maintain multiple copies of every CSS block?
使用最新版本的 Chrome 和 Firefox.
Using freshly updated versions of Chrome and Firefox.
推荐答案
不幸的是，不复制声明块是不可能的，因为 CSS 规范规定浏览器在遇到 CSS 规则中无法识别的选择器时必须这样做:
Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:
选择器包含(但不包括)第一个左花括号 ({) 之前的所有内容.选择器总是与 {} 块一起使用.当用户代理无法解析选择器(即，它不是有效的 CSS3)时，它必须 忽略 {} 块.
The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.
在这种情况下，一个供应商的浏览器无法识别另一个供应商的前缀，因此它必须忽略该规则.
In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.
相关文章