Question

以下html（5）在div的底部产生一条黑线。这是因为div比所包含的图像更高。但我想知道为什么会这样？

<!DOCTYPE html>
<html>
  <body>
    <div style="position:absolute; background:#000;">
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="height:50px;">
    </div>
  </body>
</html>

我不认为这是一个浏览器错误，因为Firefox，Chrome和Opera的结果是相同的。当使用XHTML doctype时，它呈现正常：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

顺便说一句：它也适用于html5，但只有当我设置display：block for image时。这真的需要吗？

Answer 1

这不是XHTML文档类型，因此更改它，它更像严格与过渡。

使用XHTML 1.0过渡doctype将浏览器置于有限怪癖模式，而HTML5样式doctype选择标准模式。两种模式之间的图像垂直对齐不同。

如果您使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">同时将浏览器置于标准模式，您可以看到相同的黑线。

有多种方法可以删除黑线。一种是将img设置为display:block。另一种方法是将img设置为vertical-align:bottom。

Answer 2

黑色条显示您的背景颜色。如果您不想看到黑色，可以选择从div的样式属性中删除background:#000。

另外，为什么你在你的style属性中使用height：50px？如果您尝试调整图像大小，请改用height属性。

选项2：

此代码似乎也删除了显示的黑色背景表单：

<!DOCTYPE html>
<html>
  <body>
    <div style="background:#000;">
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="position:absolute; height: 50px;">
    </div>
  </body>
</html>

奇怪的html5行为

2 个答案: