html - 不同系统上的 css3 箭头

Question

我做了两个箭头，在 MacOSX 上编码，我无意中发现箭头在 Windows 上看起来不太好。是因为分辨率还是代码不正确？

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

第一个在 mac 上，第二个在 Windows 上，都是 Chrome 最新版本

Answer 1

由于某种原因，它偏离了一个像素。将位置更改为 -> 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 添加单独的代码:

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;

}