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

Question

当在绝对定位的盒子上为标题指定1px底部边框时,并且盒子的高度基于百分比,在非视网膜屏幕上,标题边框看起来像它的2像素,而在视网膜屏幕上它显示指定的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 等）时，浏览器需要在某处填充缺失的像素。有些浏览器会将其填充到框的高度，有些浏览器会填充边框。

这只是我的猜测。这也可能是“候选版本”属性（翻译）的问题，因为当您使用“top”而不是“translate”时，它可以正常工作。也许我们应该等待官方翻译？

顺便说一句，谢谢您的警告。