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

嘗試使用整個像素值。