在不同系统上的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箭头

回答

相关问题