Firefox不正确显示：before和：after伪元素 [英] Firefox not displaying properly :before and :after pseudo-elements

问题描述

在每一个其他浏览器上，网页看起来不错，除了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伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！