5

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

亲自检查现场演示

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

预期行为:不应显示此背景,因为容器的宽度和高度应与其内容(图像)相同。

实际行为

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

在 Chrome 12 上
(来源:imgh.us

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

歌剧 11
(来源:imgh.us

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

4

2 回答 2

2

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

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

于 2011-04-29T15:34:28.020 回答
1

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

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

于 2011-04-29T13:19:48.427 回答