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

Question

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

这工作完全在铬但火狐它的另一个故事，箭头以下行（：前）略有改变其立场向左。我们能解决这个问题吗？

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; 
} 

尝试使用整个像素值。