img {max-height:100%; 导致img超出边界

Question

这是Chrome错误吗？

这是HTML:

<div><img src="test.png"></div>

这是CSS:

* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }

预期结果:img应该有65px的高度.

在Mac OS上的Chrome(v.27.0.1453.116)中的结果(v.10.6.8):img高度为135px并且"渗透"到父级div的填充中.如果我改变padding的div到50px 0,奇怪的是它呈现正常.

在codepen中玩这个:http://codepen.io/anon/pen/jhbKz

截图:

第一个块padding的50px 0.第二区块padding的75px 0 60px.

Firefox(正确的结果)

Chrome(错了吗？)

Answer 1

尝试在图像中添加容器,宽度和高度均为100%.这将在chrome和FF上提供相同的输出.

<div class="b">
    <div style='height:100%;width:100%;'>
        <img src="some image url">
    </div>
</div>

我无法解释为什么这个修复目前有效,但我自己正试图用它推理.