在不同系統上的css3箭頭

我做了兩個箭頭，在MacOSX上編碼，我意外地發現箭頭在窗戶上看起來不太好。是因爲分辨率還是代碼不正確？在不同系統上的css3箭頭

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

第一個是在Mac上，第二屆一個是在Windows上，都在Chrome最新版本

來源

2017-03-02 olo

它通過對一些像素的場外原因。將位置更改爲 - >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添加單獨的代碼

來源

2017-03-02 06:05:10 Aj334

在不同系統上的css3箭頭

回答

相關問題