css 1px 边框在带有 chrome 和 safari 的非高密度显示器（视网膜）上显得更厚答案

【问题标题】：css 1px border appear thicker on non-high density monitors (retina) with chrome and safaricss 1px 边框在带有 chrome 和 safari 的非高密度显示器（视网膜）上显得更厚
【发布时间】：2015-05-09 05:07:39
【问题描述】：

当为绝对定位的框上的标题指定 1 像素的底部边框，并且框的高度基于百分比时，在非视网膜屏幕上，标题边框看起来像它的 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。也可以尝试调整浏览器窗口的大小，box-3 的边框会改变

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

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

Box-3 是绝对定位的，盒子高度以百分比指定，在 y 方向平移 -50%。

【问题讨论】：

标签： css google-chrome safari webkit

【解决方案1】：

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

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

我用常规的边框底部切换它，这解决了可视化问题。

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

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

干杯！

【讨论】：

【解决方案2】：

不只是1px，好像不管边框的高低都会出现bug。

不使用翻译时，该错误消失；

我的想法是百分比和像素可能会有问题，因为你不能用 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% translate 不是整数（1 - 2 - 3，而不是 1,2 - 2,1 等）时，浏览器需要在某处填充缺失的像素。一些浏览器会将其填充到框的高度，一些带有边框..

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

谢谢你的警告。

【讨论】：