html - CSS 图像的容器以 100% 的高度缩放

Question

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

亲自检查现场演示。

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

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

实际行为：

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

_{（来源：imgh.us）}

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

_{（来源：imgh.us）}

主要浏览器之间这种强烈差异的根本原因是什么？

Answer 1

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

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

Answer 2

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

也就是说，你的元素是内联定位的（就像一个跨度），但元素的内容被布置成好像元素是一个块一样。