当使用伪元素时，不同浏览器的绝对定位是不同的

Question

我正在修改一个下载链接，以显示它上面的两个图标(使用伪元素和图标字体)。这些图标需要分层。

要做到这一点，我给了链接一个position: relative和第二个图标(我定位在第一个顶部)得到一个position: absolute。然后我只是调整了top和left的值，直到它位于我想要的位置。

jsFiddle

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
    /* just to make sure everything fits on screen */
    padding: 100px;
    text-align: center;
}
.download {
    position: relative;
    color: #000;
    text-decoration: none;
}
.download::before {
    display: block;
    content:'f1c1';
    font-family:'FontAwesome';
    font-size: 42pt;
    margin-bottom: 10px;
}
.download::after {
    position: absolute;
    display: block;
    content:'f019';
    font-family:'FontAwesome';
    font-size: 28pt;
    top: -40px;
    left: 50%;
    margin-left: 5px;
}

<a href="#" class="download">Download PDF</a>

在Chrome中，它可以完美地工作。"下载"图标位于"文档"图标右下方的正上方。然而，在firefox中，"下载"图标在"文档"图标上方盘旋。我怀疑这是伪元素在技术上不是a.download元素的DOM子元素的结果，尽管这个例子(不使用伪元素)有相同的定位问题。

浏览器的position: absolute的实现与伪元素是如何不同的，我该如何解决这个问题?

Answer 1

我想我明白了。

<a>标签在Chrome上崩溃，但在Firefox上它被赋予一个框。似乎最好的选择是给<a>标签一些padding-top来推动文本，然后也绝对定位acrobat图标。我不太确定如何使它在Chrome上不崩溃

示例:http://jsfiddle.net/5jn9yw7s/

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
    padding: 100px;
    text-align: center;
}
.download {
    position: relative;
    color: #000;
    text-decoration: none;
}
.download::before {
    position: absolute;
    display: block;
    content:'f1c1';
    font-family:'FontAwesome';
    font-size: 42pt;
    top: -52pt;
    left: 50%;
    margin-left: -21pt;
}
.download::after {
    position: absolute;
    display: block;
    content:'f019';
    font-family:'FontAwesome';
    font-size: 28pt;
    top: -32pt;
    left: 50%;
}

<a href="#" class="download">Download PDF</a>

Answer 2

在firefox中，伪元素的绝对定位被忽略，并被视为两个相对元素。您可以通过将此添加到css:

来设置firefox特定的修复。

@-moz-document url-prefix() {
    .download::after {
        top: 0;
        left: 0;
        margin-left: 5px;
        margin-top:58px
   }
}

工作小提琴