Question

我几年来一直在制作网站，但直到最近才开始使用html5 doctype，今天我发现了4px的填充底部被添加到图像中的行为。

如果将doctype更改为xhtml1.0

，则填充消失

这是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Technic-Al</title>
    <style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>

<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>

将doctype更改为其他任何一个会删除底部填充（背景为绿色）

有很多人来这里提出修复建议

行高= 0

我相信还有另一个解决方案可行。

或者我应该说“解决方法”

但肯定这是html5 doctype的错误吗？

我们会和谁谈谈这件事吗？谁处理这样的bug？我们如何解决这个问题？

这里有人知道如何解决这个问题吗？

Answer 1

这不是一个错误，这是CSS规范所说的应该发生的事情。它不是HTML5特定的，HTML 4.01 strict和XHTML 1.0 strict doctypes会做同样的事情。

它不是填充 - 它是计算行框高度的结果。

没有希望改变它，太多的网页依赖于现有的行为。

适当的权限是W3C CSS working group。

Answer 2

我遇到了一个页面在页面底部显示填充的问题

img { display:block ; }

在css文件中写上面解决了我的问题。希望这个帮助

Answer 3

使用css中的vertical-align属性：

img{
    vertical-align:top;
}

html5 doctype image padding-bottom bug

3 个答案: