100% 高度 img 上的 Safari 边框框高度错误，在父级上填充

Question

box-sizing: border-box在 Safari 中使用时，存在影响img使用时元素高度height: 100%和父元素上的填充的错误。

请参阅此小提琴并在 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 以 30px 的高度显示图像。

• 如果我们在宽度而不是高度中测试这个，没有问题。
• 如果我们删除填充或注释掉边框样式，没有问题。
• 如果我们使用其他块元素（例如 div 而不是 img）来测试这一点，则没有问题。

我发现没有报告此问题的其他实例。这是要报告的新 webkit 错误吗？或者我错过了什么？

（在 Safari 9.1.1 和 Webkit Nightly 202811 中测试）

Answer 1

为图像添加一个包装，高度为 100%，填充为 0：

https://jsfiddle.net/vgdz2Loj/

<div>
  <div class="wrapper">  
    <img src="http://placehold.it/40x40">
  </div>
</div>

.wrapper {
  height: 100%;
  padding: 0;
}