在 Safari 中使用 box-sizing: border-box
时,在使用 height: 100%< 时存在影响
和父元素上的填充。img
元素高度的错误
查看此 fiddle 并在 Chrome/Firefox 和 Safari 上进行测试以查看差异:https://jsfiddle.net/Arko/66b9bt02/1/
完整代码供引用:
HTML:
<div>
<img src="http://placehold.it/40x40">
</div>
CSS:
* {
box-sizing: border-box;
}
div {
padding: 15px;
height: 50px;
}
img {
height: 100%;
}
使用边框大小调整后,img 高度应为 20px(50px div 高度减去 2x 15px 内边距)。这在 Chrome 和 Firefox 中是正确的。但是 Safari 以 30 像素的高度显示图像。
- 如果我们在宽度而不是高度上测试它,没问题。
- 如果我们删除填充或注释掉边框样式,没问题。
- 如果我们使用其他 block 元素(例如 div 而不是 img)对此进行测试,则没有问题。
我发现没有报告此问题的其他实例。这是要报告的新 webkit 错误吗?还是我遗漏了什么?
(在 Safari 9.1.1 和 Webkit Nightly 202811 中测试)
最佳答案
为高度为 100%、填充为 0 的图像添加包装:
https://jsfiddle.net/vgdz2Loj/
<div>
<div class="wrapper">
<img src="http://placehold.it/40x40">
</div>
</div>
.wrapper {
height: 100%;
padding: 0;
}
关于css - 100% 高度 img 上带有父级填充的 Safari 边框高度错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38199604/