在所有主要浏览器中：正如问题所述，父<div>容器（其高度未设置）过大其高度以适应子<img>元素（例如，300 像素高的图像，它是内部唯一的东西div）。过大的尺寸通常约为 3 到 5 个像素，最初看起来像 imgmargin-bottom或 divpadding-bottom可能的样子。
但是，使用绝对定位，可以清楚地证明底部比底部div低img几个像素。它可能不会破坏网站的设计，但在某些情况下它是一个需要克服的障碍。我在这里做了一个相当详细的小提琴演示这个问题。
- 为什么在 Web 浏览器中采用这种标准做法？
- 这是为了弥补什么吗？似乎没有必要。
- 这是一个错误，还是一个即将过时的功能？
编辑：感谢下面的回答者/评论者，我知道原因是
<img>默认情况下将 an 视为display:inline保留元素周围空白的 CSS。将其更改为display:block通过消除元素周围的空格来完全解决问题。
注意：float:left可以通过为图像子元素提供or等 CSS 属性来避免这种尺寸过大float:right，但这是一种解决方法，因此不是问题的答案。这可能会出现问题的一个原因是，如果您已经float在 div 子图像前面分层了其他元素（Firefox、Opera、IE 不允许浮动重叠。float在使用 CSSposition设置的 Chrome 和 Safari 中似乎只允许重叠）。谢谢！