这是重现问题的 HTML 代码:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
当它在桌面浏览器中呈现时，唯一的
<div> 的高度变成了 45 像素，但不是我预期的 40(在 IE11 和 Opera Next v20 中测试过)。 logo.gif 是 100x40，即使我通过 CSS 将零边框应用于 <img> 标签(边框、边框宽度等)，情况仍然相同。为什么会发生以及如何解决？
最佳答案
我相信这不是错误，因为它在所有主要浏览器中的呈现方式都相同。如果我们只设置 display:block 样式，问题就解决了。没有这个，图像被渲染为一个内联元素，它的底部边框与所谓的文本基线对齐。
让我们更改我们的代码来演示这一点:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
结果如下:
如您所见，需要额外的空间来渲染文本而不进行剪裁!
我在 Eric Meyer CSS: The Definitive Guide 的著名著作中找到了对这一点的确认 - 在专门介绍对齐的部分中，当它描述
{vertical-align: baseline} 标记的 <img> 属性时。这是相应的摘录:关于html - <div> 图像的高度比预期的要大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21726898/