使用伪元素时浏览器之间的绝对定位不同

Question

我正在修改下载 link 以在其上方显示两个图标（使用伪元素和图标字体）。这些图标需要分层。

为此，我给 link 一个 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中，它完美运行。 "download" 图标位于 "document" 图标右下角的正上方。然而，在 Firefox 中，"download" 图标悬停在 "document" 图标上方。我怀疑这是因为伪元素在技术上不是 a.download 元素的 DOM 子元素，尽管 this example（不使用伪元素）具有相同的定位问题。

浏览器对 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
   }
}

Working fiddle

玩边距以获得更好的结果。

使用伪元素时浏览器之间的绝对定位不同

Absolute Positioning Varies Between Browsers when Using Pseudo-Elements

html

css

css-position

pseudo-element