問題描述

我正在開發一個 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模板網！