为什么：之前和之后：伪元素只能在Firefox中工作？

我创建了一个select列表具有:after和:before伪元素选项 - DEMO为什么：之前和之后：伪元素只能在Firefox中工作？

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

但是这个作品只在Firefox和没有其他的浏览器。

正如上W3C说明，MDN，SitePoint的:after是，没有人一个“匹配元素之后呈现并用于添加化妆品内容伪元素”各国任何约元件限制它不能应用于至。

问题 - 为什么所有浏览器（FF除外）都无法正确显示伪元素？任何文档非常感谢。

来源

2012-08-10 Zoltan Toth

SitePoint的描述不准确。 MDN的描述更接近规范中的内容。 – BoltClock 2012-08-10 14:10:36

是否有限制不确定的，因此不一致的行为。这在spec的相关部分的底部提到：

注意。本规范并未完全定义：before和after之后的替换元素（如HTML中的IMG）之间的交互。这将在未来的规范中更详细地定义。

大多数HTML表单元素都被视为替换元素，包括select和option。

来源

2012-08-10 14:06:52 BoltClock

谢谢。 *这种*很有意义 - [替换元素]（http://reference.sitepoint.com/css/replacedelements），同时'：first-letter' [failed]（http://jsfiddle.net/V8cvQ/9 /）in * all * browsers – 2012-08-10 14:33:38

@ZoltanToth：但是'：first-letter'伪元素只能应用于块级元素。 – MrWhite 2012-08-10 14:44:32

@ w3d - 这是真的，但无论如何，它都会失败http://jsfiddle.net/V8cvQ/12/ – 2012-08-10 14:56:03

你看过这个：:before and :after pseudo elements on html tag is wonky in Chrome？

接受的答案说，在浏览器的问题：

https://code.google.com/p/chromium/issues/detail?id=75544

来源

2012-08-10 14:04:19

这是一个不同的问题。 – BoltClock 2012-08-10 14:05:26

为什么：之前和之后：伪元素只能在Firefox中工作？

回答

相关问题