Safari border-box height bug on 100% height img with padding

Question

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

看看这个，在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%;
}

border-box的大小，img的高度应该是20px (50pxdiv高度减去2x 15px填充)。这在Chrome和Firefox中是正确的。但是Safari显示的图像高度为30px。

• 如果我们在宽度而不是高度测试，没有问题。
• 如果我们去掉padding或者注释掉border-box样式，没有问题。
• 如果我们用其他块元素(如div而不是img)进行测试，没有问题。

我没有发现这个问题的其他实例报告。这是一个新的webkit bug报告吗?还是我错过了什么?

(在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;
}