我正在尝试创建一个布局,其中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过渡一样工作的最佳方法是什么？
更新:thirtydot回答了问题,如果我包含img {display:block; HTML5版本的行为与XHTML Transitional完全相同.谢谢thirtydot!
但是在关闭这个帖子之前,有人可以向我解释为什么会这样: