我发现唯一适用于垂直间距的网格系统是Golden Grid，它不使用body {line-height}，但是它的垂直间距是自己的.clear {height：5px}。
我的问题是，无论我如何尝试，我无法在HTML5中使间距工作。我在谈论垂直排列的图像，没有间隙。在XHTML过渡模式下，一切工作都非常完美，图像完美对齐，但在HTML5模式下，它们之间有一个垂直的差距。 Chrome的差距为2像素，Firefox中的差距为2-3像素。我认为在HTML5模式下使用时，每个网格系统都是这样。我不知道用普通的HTML5编写这个代码的最好办法是什么，所以我刚刚尝试过网格系统。蓝图也是960.gs的垂直差距。
我发现一个解决方案可能是设置body {line-height：0}并在每个排版标记中定义行高。但是我不明白为什么要这样一个简单的例子是这样一个坏的黑客：垂直排列的图像。为什么HTML5模式下的浏览器与XHTML Transitional模式不同？
在这里，我有相同的页面，没有改变，只是doctype。 XHTML一个在每个浏览器中都是像素完美的，HTML5之间有差距，与浏览器不同。
什么是使HTML5示例的工作方式像XHTML过渡的最佳方法？
更新：三十点回答问题，如果我包括img {display：block; } HTML5版本的行为与XHTML Transitional完全相同。谢谢你三十多岁
但是在关闭这个线程之前，有人可以向我解释为什么是这样的：
>为什么所有浏览器在HTML5模式下的行为都不一样，并且在没有指定为display：block时，img元素之间的垂直间距都不同。看看浏览器比较网站上面的html5链接，它将不同于浏览器到浏览器。他们的差距在2到4像素之间。
>为什么XHTML Transitional不需要这个黑客
>为什么XHTML Strict也产生垂直差距
>使用img {display：block; }在一个reset.css表？
解决方法
Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements,when not specified as 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; }。要么会工作
Why does XHTML Transitional not need this hack
使用XHTML Transitional doctype将浏览器置于“有限的怪癖”模式。如果您使用XHTML Strict或完整的HTML4 Strict doctype，您将会看到与HTML5 doctype所看到的相同的差距，因为浏览器在“标准”模式下都是这些。
Why does XHTML Strict produce a vertical gap too
往上看。
Is it safe to use img { display: block; } in a reset.css sheet?
当然，但是可能有时候你会想要< img>被视为内联元素。在这些情况下，您需要在适当的位置添加CSS才能实现。
