2012-08-10 80 views
3

我創建了一個select列表具有:after:before僞元素選項 - DEMO爲什麼:之前和之後:僞元素只能在Firefox中工作?

option:after, option::before { 
    content: " "; 
    height: 5px; 
    width: 5px; 
    background: #c00; 
    border-radius: 5px; 
    display: inline-block; 
} 

但是這個作品只在Firefox和沒有其他的瀏覽器。

正如上W3C說明,MDNSitePoint:after是,沒有人一個「匹配元素之後呈現並用於添加化妝品內容僞元素」各國任何約元件限制它不能應用於至。

問題 - 爲什麼所有瀏覽器(FF除外)都無法正確顯示僞元素? 任何文檔非常感謝。

+0

SitePoint的描述不準確。 MDN的描述更接近規範中的內容。 – BoltClock 2012-08-10 14:10:36

回答

5

是否有限制不確定的,因此不一致的行爲。這在spec的相關部分的底部提到:

注意。本規範並未完全定義:before和after之後的替換元素(如HTML中的IMG)之間的交互。這將在未來的規範中更詳細地定義。

大多數HTML表單元素都被視爲替換元素,包括selectoption

+0

謝謝。 *這種*很有意義 - [替換元素](http://reference.sitepoint.com/css/replacedelements),同時':first-letter' [failed](http://jsfiddle.net/V8cvQ/9 /)in * all * browsers – 2012-08-10 14:33:38

+0

@ZoltanToth:但是':first-letter'僞元素只能應用於塊級元素。 – MrWhite 2012-08-10 14:44:32

+1

@ w3d - 這是真的,但無論如何,它都會失敗http://jsfiddle.net/V8cvQ/12/ – 2012-08-10 14:56:03

相關問題