Question

箭头线的位置在不同的浏览器中更改。我们能解决这个问题。我在父级上使用了position:relative，因此这不是一个重复的问题。

这在 Chrome 中非常有效，但在 Firefox 中则是另一个故事，箭头后面的行（：before）会稍微向左更改其位置。我们能解决这个问题吗？

span{
    font-size: 13px;
    margin-top: 5px;
    font-weight: 600;
    vertical-align: top;
    position: relative;
    padding-left: 12px;
    color:#00C16D;
}
span.up:after {
    content: '';
    position: absolute;
    border-left: 4.5px solid rgba(181, 41, 41, 0);
    border-bottom: 8px solid #00C16D;
    border-right: 4.5px solid rgba(221, 221, 221, 0);
    top: 0px;
    left: 0;
}
span.up:before {
    content: '';
    position: absolute;
    border-left: 3px solid #00C16D;
    bottom: 3px;
    left: 11%;
    height: 8px;
}

<span class="up">Up</span>

Answer 1

我怀疑这是由于使用小数像素值导致的像素舍入

span.up:after {
    content: '';
    position: absolute;
    border-left: 4.5px solid rgba(181, 41, 41, 0);
    border-bottom: 8px solid #00C16D;
    border-right: 4.5px solid rgba(221, 221, 221, 0);
    top: 0px;
    left: 0;
}

尝试使用整个像素值。

CSS箭头在不同浏览器中的定位不同

1 个答案: