Safari 9.1.3边框宽度问题
问题描述:
所以我不确定发生了什么,但在Safari 9.1.3中,具有其他样式特定组合的元素上的边框宽度会产生意想不到的结果。基本上,我正在对绝对定位的元素应用变换以获得水平居中的可变宽度元素。Safari 9.1.3边框宽度问题
HTML:
<div class="border">
<div class="border__text">
test
</div>
</div>
CSS
.border {
position: absolute;
left: 50%;
padding: 50px;
border: 1px solid #666666;
transform: translateX(-50%);
}
.border__text {
font-size: 12px;
font-style: italic;
font-family: "Times New Roman", Times, serif;
}
截图
Codepen
我可以得到它,如果我更改字体大小以11个或13像素的工作,但我想它是12,我可以得到它,如果我删除工作这个转换,但我不确定一个简单的方法来将一个绝对定位的元素置于没有它的位置。
答
不要使用transform
,做这样的
.border {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.border__text {
display: inline-block;
font-size: 12px;
padding: 10px 50px;
border: 1px solid #666666;
}
<div class='border'>
<div class='border__text'>test</div>
</div>
为理由被变换,为什么你需要用它来居中DIV? – LGSon
@LGSon我正在水平居中。需要变换来调整'position:absolute;'和'left:50%;' – mdelrossi1
之后的位置如果你这样做,你的问题就不复存在了:http://codepen.io/anon/pen/VKARVL – LGSon