在Firefox中忽略Webkit特定的CSS选择器 [英] Ignoring Webkit-specific CSS selector in Firefox

问题描述

我正在做一个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 = ] :: - webkit-slider-thumb，位。删除它和Firefox工作正常。它也用于其他语法，如 :: - webkit-file-upload-button ， :: selection 其他事情使用 :: - webkit -... 标签。它识别它自己的 :: - moz -... 标签，如 :: moz-selection 只是好

Webkit似乎只是忽略了 :: - moz - 标签。

有没有任何方便的方法让Firefox忽略 :: - webkit -... 标签或者处理这个问题，而不必维护多个

解决方案

使用新版本的Chrome和Firefox

$ b

不幸的是，如果没有复制声明块，就不可能如 CSS规范规定当在CSS规则中遇到无法识别的选择器时，浏览器必须采用这种方式：

（但不包括）第一个左大括号（{）。选择器总是与{}块一起。当用户代理无法解析选择器（即它不是有效的CSS3）时，它必须忽略 {} -block。

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

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.

Problem is; Firefox has problems with some Webkit-specific syntax.

For example:

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;
}

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 seems to just ignore the ::-moz- labels.

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?

Using freshly updated versions of Chrome and Firefox.

解决方案

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:

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选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！