作者:政凯雅惠1663 | 来源:互联网 | 2023-05-19 01:23
当在绝对定位的盒子上为标题指定1px底部边框时,并且盒子的高度基于百分比,在非视网膜屏幕上,标题边框看起来像它的2像素,而在视网膜屏幕上它显示指定的1px边框.此呈现错误仅出现在Safari和Chrome上.对不起,没有在IE上试试.
.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%.