css 1px边框在非高密度显示器（视网膜）上显示较厚的铬和野生动物园

Question

当在绝对定位的盒子上为标题指定1px底部边框时，并且盒子的高度基于百分比，在非视网膜屏幕上，标题边框看起来像2 px，而在视网膜屏幕上它显示指定的1px边框。此呈现错误仅出现在Safari和Chrome上。对不起，请不要在IE上试试。

<div class="container">
   <div class="box">
     <div class="title">box</div>
   </div>
</div>

.container {
  width: 100%;
  height: 100%;
}

.box {
  width: 100px;
  height: 25%; 
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  -webkit-transform: translate(0, 50%);
  -ms-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.title {
  border-bottom: 1px solid blue;
  margin: 5px;
  height: 20px;
}

查看我的jsfiddle。 同时尝试调整浏览器窗口的大小，框-3上的边框也会改变

Box-1绝对定位，盒子高度以像素为单位。

Box-2绝对定位，盒子高度以像素为单位，在y方向上平移-50％。

Box-3绝对定位，盒子高度以百分比表示，在y方向上平移-50％。

Answer 1

它不仅仅是1px，似乎无论边界高度都会出现错误。

当您不使用翻译时，错误就会消失;

我的想法是百分比和像素可能会有问题，因为你不能用1px制作一个百分比，而且它将取决于浏览器如何填充缺失的像素。

查看控制台：http://jsfiddle.net/9xLjx1zy/3/

var $box3 = $('#box3'); 
$(window).resize(function(){
    var height = $box3.height();
    var boxOffset = $box3.offset().top;
    console.log("Box height = "+height);
    console.log("Box offset = "+boxOffset);
});

当50％翻译不是整数（1 - 2 - 3，而不是1,2 - 2,1等）时，浏览器需要在某处填充缺失的像素。有些浏览器会将其填入框高，有些则带有边框..

这只是我的猜测。它也可以是发布候选人＆＃34;属性（翻译），因为当你使用＆＃34; top＆＃34;而不是＆＃34;翻译＆＃34;，它工作正常。也许我们应该等待翻译成为正式的？

警告顺便提一下。

Answer 2

当我尝试使用span元素显示边框时，我在Chrome中遇到了这个视觉边框问题：

<span style="height: 1px; background: red"></span>

我用常规的border-bottom切换它，这解决了可视化问题。

 <span style="height: 0px; border-bottom: 1px solid red"></span>

我在你的例子中看到你正在使用边框样式，但无论如何我认为这些信息可能会有所帮助！

干杯！