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

이 전체 픽셀 값을 사용해보십시오 값입니다 생각한다.