忽略 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.

这篇关于忽略 Firefox 中特定于 Webkit 的 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！