CSS图像容器缩放，高度为100％

Question

我正在使用一个必须在div中自动缩放的图像，其高度由根div定义。 所有主流浏览器的缩放都很好，在图像上使用height: 100%。 但似乎在某些浏览器中，图像容器不会根据其内容（图像）调整其宽度。

自己检查live demo。

此演示使用蓝色背景的图像容器。

预期行为：此背景不应显示，因为容器宽度和高度应与其内容（图像）相同。

实际行为：

• 在Chrome 11，Safari 5和IE9上，行为符合预期。

• 在Firefox 3.6 / 4.0和Opera 11上，行为与预期不符：显示蓝色背景。

主要浏览器之间存在这种巨大差异的根本原因是什么？

Answer 1

对于Firefox，这看起来像一个bug。我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=653739

您可以通过删除overflow:hidden来解决问题，除非您确实需要它。

Answer 2

后来的浏览器会更严格地（正确地）解释inline-block。

也就是说，你的元素是内联的（就像一个span），但是元素的内容被布局好像元素是一个块。