图像的<div>比预期的高度更大
Tec*_*Man 4 html css layout image
这是一个重现问题的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>标记(边框,边框宽度等),情况仍然相同.
为什么会发生以及如何解决？
我相信它不是一个bug,因为它在所有主流浏览器中以相同的方式呈现.如果我们只设置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着名的书中找到了对此的确认:权威指南 - 在专门用于对齐的部分中,它描述{vertical-align: baseline}了<img>标签的属性.以下是相应的摘录:
此对齐规则很重要,因为它会导致某些Web浏览器始终将替换元素的下边缘放在基线上,即使行中没有其他文本也是如此.例如,假设您自己在表格单元格中有一个图像.图像实际上可能位于基线上,但在某些浏览器中,基线下方的空间会导致图像下方出现间隙.其他浏览器将使用表格单元"收缩包装"图像,并且不会出现间隙.尽管CSS工作组缺乏对大多数作者的吸引力,但差距行为是正确的.
| 归档时间： |
|
| 查看次数： |
3655 次 |
| 最近记录： |