我正在研究一个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虽然很好。
input[type="range"]::-webkit-slider- thumb,
::-webkit-file-upload- button
::selection
::-webkit-...
::-moz-...
::-moz- selection
Webkit似乎只是忽略::-moz-标签。
::-moz-
有什么便捷的方法可以使Firefox忽略::-webkit-...标签或以其他方式处理此问题,而不必维护每个CSS块的多个副本?
使用Chrome和Firefox的最新版本。
不幸的是,如果不复制声明块,是不可能的,因为CSS规范规定浏览器在遇到CSS规则中无法识别的选择器时必须以这种方式进行操作:
选择器包含直到(但不包括)左第一个大括号({)的所有内容。选择器始终与{}块一起使用。当用户代理无法解析选择器时(即,它不是有效的CSS3),它也必须忽略{}块。
在这种情况下,这是一个供应商的浏览器无法识别另一供应商的前缀,因此它必须忽略该规则。