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

Question

箭头线的位置在不同的浏览器中会发生变化。我们能不能解决这个问题。我在父级上使用了 position:relative，所以 这不是一个重复的问题。

这在 Chrome 中完美运行，但在 Firefox 中是另一回事，箭头后面的行（：之前) 将其位置稍微向左移动。我们能解决这个问题吗？

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箭头在不同浏览器中的定位不同

CSS arrow positioning different in different browsers

css

cross-browser

css-position