CSSの矢印の位置がブラウザによって異なる

Question

矢印の位置は、ブラウザによって異なります。これを解決できますか？私はposition:relativeを親に使用しましたので、これは重複した質問ではありません。

これはクロームで完璧に動作しますが、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; 
} 

値による端数ピクセルの使用にこれはピクセル丸めによるものである疑いがある画素全体が値使用してみてください。