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

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过渡一样工作的最佳方法是什么？

更新: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模式下的行为都不同,并且当未指定为display:block时,img元素之间的垂直间隙都不同？

首先,浏览器没有"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中进行测试,这样可以在两个页面之间实现像素完美相同的渲染.