css3 Pfeil auf anderes System

Question

Ich machte zwei Pfeile, codiert auf MacOSX, ich fand versehentlich die Pfeile nicht gut auf Windows. Ist das wegen der Auflösung oder der Code falsch?

https://jsfiddle.net/m7ynysdp/

<div class="arrow a1"></div> 
<div class="arrow a2"></div> 

.arrow { 
    height: 0; 
    border-bottom: 2px solid; 
    border-width: 2px; 
    position: relative; 
    color: #000; 
} 

.a1 { 
    position: absolute; 
    top: 51%; 
    left: 76%; 
    transform: translate(-51%, -76%); 
    width: 22vw; 
    transform: rotate(-156deg); 
    transform-origin: 0; 
    border-bottom: 2px solid; 
} 

.a2 { 
    position: absolute; 
    top: 53%; 
    left: 65%; 
    transform: translate(-53%, -65%); 
    width: 6.5vw; 
    transform: rotate(-111deg); 
    transform-origin: 0; 
    border-bottom: 2px solid; 
    cursor: pointer; 
    transition: color .3s; 
} 

.arrow::before { 
    position: absolute; 
    top: -13px; 
    right: -3px; 
    content: '>'; 
    display: block; 
    font-size: 1.4rem; 
} 

erste auf mac ist, 2. ist auf Windows, sowohl auf Chrome neueste Version

Answer 1

Es ist weg von einem Pixel für einige Grund. Ändern der Position zu ->top: -12px; und Hinzufügen einer font-weight: bold; Eigenschaft scheint es zu beheben.

.arrow::before { 
    position: absolute; 
    top: -12px; 
    right: -3px; 
    content: '>'; 
    display: block; 
    font-size: 1.4rem; 
    font-weight: bold; 
} 

https://jsfiddle.net/oqfes3sk/

Vielleicht könnten Sie separaten Code hinzufügen, sowohl für Mac und PC, nachdem die User-Agent-Erkennung:

jQuery(document).ready(function(){ 
if(navigator.userAgent.indexOf('Mac') > 0){ 
    jQuery('body').addClass('mac'); 
} else { 
    jQuery("body").addClass("pc"); 
} 
}); 

und dann:

.mac .arrow:before { 

    ... 
    top: -13px; 

} 

.pc .arrow:before { 

    ... 
    top: -12px; 
    font-weight: bold; 

}