html5垂直间距问题

Question

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

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

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

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

在这里，我有相同的页面，没有任何更改，只是doctype。XHTML一个在每种浏览器中都是像素完美的，HTML5一个存在差距，并且因浏览器而异。

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

更新 ：三十点回答了这个问题，如果我包括img {display：block; } HTML5版本的行为与XHTML
Transitional完全相同。谢谢三十点！

但是在关闭此线程之前，有人可以向我解释为什么：

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

Answer 1

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

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

在“标准”模式下，即使该行框中没有实字符，该行框也始终包含基线下方g，p和y之类的字符后裔的空间。您看到的差距是基线之间的距离线框的底部是这些下降器的空间。

因此，补救措施是停止<img>被视为嵌入式元素{ display:block; }或覆盖的垂直对齐方式<img> { vertical- align:bottom; }。两者都会起作用。

为什么XHTML Transitional不需要此技巧

使用XHTML Transitional doctype将浏览器置于“有限的怪癖”模式。如果您使用了XHTML Strict或完整的HTML4 Strict
doctype，那么您将看到与HTML5 doctype相同的差距，因为每种方法都将浏览器置于“标准”模式。

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

往上看。

使用img {display：block; }放在reset.css工作表中？

当然，但是有时候您可能希望<img>被视为内联元素。在这种情况下，您需要在适当的位置添加CSS来实现。