Firefox不正确显示：before和：after伪元素

问题描述：

在每一个其他浏览器上，网页看起来不错，除了Firefox。甚至Internet Explorer！伪元素浮动在整个文档上，甚至在第一个元素之后不显示。有这个行为的任何解决方案吗？

On every other browser the webpage looks fine except Firefox. Even Internet Explorer! The pseudo elements float all over the document or even aren't displayed after the first ones are. Is there any solution of this behaviour?

CSS

span[property="dc:date dc:created"]::before{
    position: absolute;
    top: 60px;
    content: '';
    display: block;
    background-color: #005691;
    width: 60px;
    height: 20px;
}

span[property="dc:date dc:created"]::after{
    position: absolute;
    top: 60px;
    right: 0;
    width: 0px;
    height: 0px;
    border-top: 20px solid #01416F;
    border-right: 20px solid rgba(0, 0, 0, 0);
    content: '';
}

http://jsfiddle.net/LRnCM/1/

答

您需要将绝对定位的伪元素 relative 定位到父元素。此外， inline-block 已添加以包含父元素的宽度。

You needed to position the absolutely positioned pseudo elements relative to the parent element. Also, inline-block was added to contain the parent element's width.

.submitted {
    position:relative;
    display:inline-block;
}

更新示例

Firefox不正确显示：before和：after伪元素

相关推荐