小编fer*_*lis的帖子

当在绝对定位的盒子上为标题指定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%.