css3別のシステムにある矢印

Question

私はMacOSXでコード化された2本の矢印を作ったが、私は誤って矢印がウィンドウ上でうまく見えないことを発見した。解決のためか、コードが間違っているのでしょうか？

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

まず一つは、いくつかのピクセルではオフです両方クロームの最新バージョン

Answer 1

、第二1がWindows上で、Mac上で理由。位置を - >top: -12px;に変更し、font-weight: bold;プロパティを追加すると修正されたようです。その後、

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

と：：

.mac .arrow:before { 

    ... 
    top: -13px; 

} 

.pc .arrow:before { 

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

} 

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

https://jsfiddle.net/oqfes3sk/

は、おそらくあなたはユーザーエージェントを検出した後、MacとPCの両方に別々のコードを追加することができます