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

时间:2015-07-08 20:49:09

标签: html css css-position pseudo-element

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

为此,我已经为position: relative提供了链接,而第二个图标(我位于第一个图标的顶部)获得了position: absolute。然后我调整了topleft值,直到它位于我想要的位置。

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>
&#13;
&#13;
&#13;

在Chrome中,它完美无缺。 &#34;下载&#34;图标位于&#34;文档&#34;右下角的顶部。图标。然而,在Firefox中,&#34;下载&#34;图标徘徊在&#34;文件&#34;上方。图标。我怀疑这是伪元素在技术上不是a.download元素的DOM子元素的结果,尽管this example(它不使用伪元素)具有相同的定位问题。

浏览器&#39; position: absolute与伪元素结合的实现有所不同,我该如何解决这个问题?

2 个答案:

答案 0 :(得分:2)

我想我已经明白了。

<a>标记在Chrome上崩溃,但在Firefox上,它会被提供一个方框。似乎最好的办法是给<a>标签一些padding-top来推送文本然后也绝对定位acrobat图标。我不太确定如何让它在Chrome上崩溃

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

&#13;
&#13;
@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%;
}
&#13;
<a href="#" class="download">Download PDF</a>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在firefox中,伪元素的绝对定位被忽略并视为两个相对元素。您可以通过将此添加到您的css来设置firefox特定的修复程序:

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

Working fiddle

使用边距来获得更好的结果。