Question

我正在尝试创建一个布局，其中div之间的垂直间距是像素完美。到目前为止，我已经排除了几乎所有的大网格系统（960.gs，Blueprint），因为它们根本没有解决垂直间距的问题。使用它们，在div之间设置垂直间距的唯一方法是使用body {line-height}属性并使用它来操纵div间距。我不会称之为解决方案，因为它会破坏您的模板，取决于font-family，并且不允许您为不同的div使用不同的间距。

我找到的唯一一个对垂直间距有适当支持的网格系统是Golden Grid，它不使用body {line-height}，但它有自己的.clear {height：5px}用于垂直间距。

我的问题是无论我如何尝试，我都无法在HTML5中使用间距。我说的是垂直排列的图像，它们之间没有间隙。在XHTML过渡模式中，一切都很完美，图像完美对齐，但在HTML5模式下，它们之间存在垂直间隙。 Chrome中的差距为2px，Firefox中的差距为2-3 px，在行之间交替显示。我认为在HTML5模式下使用每个网格系统都是如此。我不知道在纯HTML5中编写此代码的最佳方法是什么，所以我只是尝试了网格系统。垂直间隙也出现在960.gs，蓝图中。

我发现的解决方案可能是设置body {line-height：0}并在每个印刷标签中定义line-height。但我不明白为什么这样一个简单的案例需要这么糟糕的黑客：垂直排列的图像。为什么HTML5模式下的浏览器与XHTML Transitional模式不同？

在这里，我有相同的页面，没有任何改变，只有doctype。 XHTML在每个浏览器中都是像素完美的，HTML5有一个差距，从浏览器到浏览器都不同。

让HTML5示例像XHTML过渡一样工作的最佳方法是什么？

UPDATE ：thirtydot回答了问题，如果我包含img {display：block; HTML5版本的行为与XHTML Transitional完全相同。谢谢thirtydot！

但是在关闭这个帖子之前，有人可以向我解释为什么会这样：

为什么所有浏览器在HTML5模式下的行为都不同，并且当未指定为display：block时，img元素之间的所有浏览器都有不同的垂直间隙。看看上面的html5链接的浏览器比较网站，它将从浏览器到浏览器不同。它们之间的间隙在2到4像素之间。
为什么XHTML Transitional不需要这个hack
为什么XHTML Strict也会产生垂直间隙
使用img {display：block;在reset.css表中？

Answer 1

为什么所有浏览器在HTML5模式下的行为都不同，并且在img元素之间都有不同的垂直间隙，未指定为display：block？

首先，浏览器没有“HTML5模式”。它们有三种模式“怪癖”，“有限怪癖”（又名几乎标准）和“标准”模式。 “有限怪癖”和“标准”模式之间只有一个区别，它与为<img>所在的线框建立线高和基线的方式有关。在“有限怪癖”模式下，如果该行上没有呈现的文本内容，则不会建立基线，<img>位于行框的底部。

在“标准”模式下，线条框始终包含基线下方g，p和y等字符下划线的空间，即使该线框中没有真实字符。您看到的间隙是距离在基线和线框底部之间，这是那些下降器的空间。有关详细说明，请参阅http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

然后，补救措施是阻止<img>被视为内联元素{ display:block; }或覆盖<img> { vertical-align:bottom; }的垂直对齐方式。要么工作。

为什么XHTML Transitional不需要这个hack

使用XHTML Transitional doctype将浏览器置于“Limited Quirks”模式。如果您使用XHTML Strict或完整的HTML4严格文档类型，您会看到与HTML5文档类型相同的差距，因为每个文档都将浏览器置于“标准”模式。

为什么XHTML Strict也会产生垂直间隙

见上文。

使用img {display：block;在reset.css表中？

当然，但有时您可能希望将<img>视为内联元素。在这些情况下，您需要在适当的位置添加CSS才能实现这一目标。

Answer 2

我觉得这不是你想要的答案。它太短了：

添加到HTML5页面的CSS中：img { display: block }。

在Firefox和Chrome中进行测试，这样可以在两个页面之间实现像素完美相同的渲染。

Answer 3

vertical-align: baseline导致图片底部出现间隙。

在严格的文档类型中，图像是内联元素，行为类似于文本。在基线处对齐内联元素会导致它们为文本下延留出空间，即使没有任何文本也是如此。

将img { vertical-align: bottom }添加到重置样式表将解决问题。

Answer 4

试试这段代码：

<html>
<head>
<style>
div, span { border:1px dotted; height:100px; width:100px; }
</style>
</head>
<body>
  <span>100px</span>
  <div>100px</div>
</body>
</html>

当您认为<img>是<span>之类的内联元素时......我认为您的大多数问题都已得到解答。

没有width / height属性，您依赖于每个浏览器渲染引擎是相同的（它们不是）。因此，在您告诉浏览器要使用多少像素之前，像素完美无效。

与<img/>的html5垂直间距问题

4 个答案: