hv 长度单位的解决方法
workaround for hv length units
我使用 top: 50vh
始终将我的图像放置在屏幕中央,而不管屏幕尺寸如何。现在我发现一些旧的 webkit 浏览器不支持这种长度的 unix。最好的解决方法是什么?
这是我的设置:
.icon-preloader-xs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(255, 255, 255, 0.5);
background-image: url('../resources/img/icon-preloader-xs.gif');
background-repeat: no-repeat;
background-position: center 50hv;
}
我推荐这种不基于hv
单位的方法。假定图像为 100 像素乘 100 像素的正方形。
您也可以使用百分比或其他相对值代替像素。如果您使用 Sass,或者只使用 Javascript 来动态设置边距,您总是可以计算这个值。
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
我使用 top: 50vh
始终将我的图像放置在屏幕中央,而不管屏幕尺寸如何。现在我发现一些旧的 webkit 浏览器不支持这种长度的 unix。最好的解决方法是什么?
这是我的设置:
.icon-preloader-xs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(255, 255, 255, 0.5);
background-image: url('../resources/img/icon-preloader-xs.gif');
background-repeat: no-repeat;
background-position: center 50hv;
}
我推荐这种不基于hv
单位的方法。假定图像为 100 像素乘 100 像素的正方形。
您也可以使用百分比或其他相对值代替像素。如果您使用 Sass,或者只使用 Javascript 来动态设置边距,您总是可以计算这个值。
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;