html5垂直间距问题与< img> [英] html5 vertical spacing issue with <img>

问题描述

我试图创建一个布局，其中div之间的垂直间距是像素完美。到目前为止，我排除了几乎所有的大网格系统（960.gs，蓝图），因为他们没有解决方案在所有的垂直间距。使用它们，设置div之间的垂直间距的唯一方法是使用body {line-height}属性，并使用它来操作div间距。我不会调用一个解决方案，因为它破坏了你的模板，依赖于font-family，并且不允许你为不同的div使用不同的间隔。

只有网格系统，我找到了适当的支持垂直间距是

然后，补救措施是停止< img> ; 被视为内联元素 {display：block; } 或覆盖< img> {vertical-align：bottom; } 。

为什么XHTML Transitional不需要这个hack

使用XHTML Transitional doctype将浏览器置于有限怪癖模式。如果你使用XHTML Strict或一个完整的HTML4严格的doctype，你会看到与你看到的HTML5的doctype相同的差距，因为每个都将浏览器设置为标准模式。

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

>



是否可以安全使用img {display：block; }在reset.css表中？

当然，但可能有时候你会需要< img> 以作为内联元素。在这些情况下，您需要在适当的位置添加CSS才能实现。

I am trying to create a layout where the vertical spacing between divs is pixel perfect. So far I've ruled out almost all the big grid systems (960.gs, Blueprint), because they have no solution at all for the vertical spacings. With them, the only way to set vertical spacing between divs is to use body { line-height } attribute and manipulate the div spacing using that. I wouldn't call that a solution, as it ruins your template, depends on font-family, and doesn't let you use different spacings for different divs.

The only grid system I found which has proper support for vertical spacing is Golden Grid, which doesn't use body { line-height }, but has it's own .clear { height: 5px } for vertical spacing.

My problem is that no matter how I try, I couldn't make spacing work in HTML5. I am talking about vertically arranged images without gap between them. In XHTML transitional mode, everything works perfecly, the images align perfectly, but when in HTML5 mode, they have a vertical gap between them. The gap is 2px in Chrome and 2-3 px in Firefox, alternating between lines. I think it's the case with every grid system when used in HTML5 mode. I don't know what's the best way to write this code in plain HTML5, so I just tried grid systems. The vertical gap is present in 960.gs, Blueprint too.

A solution I found out might be to set body { line-height: 0 } and define line-height in every single typographic tag. But I don't understand why such a bad hack would be required for such a simple case: vertically arranged images. Why are browsers different in HTML5 mode than in XHTML Transitional mode?

Here, I have the same page, nothing changed, just the doctype. The XHTML one is pixel perfect in every browser, the HTML5 one has the gap and is different from browser to browser.

What is the best way to make the HTML5 example work like the XHTML transitional one?

UPDATE: thirtydot answered the problem, if I include img { display: block; } the HTML5 version behaves exactly the same as the XHTML Transitional. Thank you thirtydot!

But before closing this thread, can someone explain to me why is it that:

• Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block. Have a look in a browser comparing site for the html5 link above, it will be different from browser to browser. They have gaps between 2 to 4 px.
• Why does XHTML Transitional not need this hack
• Why does XHTML Strict produce a vertical gap too
• Is it safe to use img { display: block; } in a reset.css sheet?

解决方案

Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block?

First of all, browsers do not have a "HTML5 mode". What they have are three modes "Quirks", "Limited Quirks" (aka Almost Standards) and "Standards" mode. There is only one difference between "Limited Quirks" and "Standards" modes and that relates to the way in which a line-height and baseline is established for the line box of which the <img> sits. In "Limited Quirks" mode, if there is no rendered text content on the line, then no baseline is established and the <img> sits on the bottom of the line box.

In "Standards" mode, the line box always contains the space for the descenders of characters like g, p and y below the baseline, even if there are no real characters in that line box.The gap you see is the distance between the baseline and the bottom of the line box which is the space for those descenders. For a thorough description, see http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

The remedy, then, is either to stop <img> being treated as an inline element { display:block; } or to override the vertical alignment of the <img> { vertical-align:bottom; }. Either will work.

Why does XHTML Transitional not need this hack

Using the XHTML Transitional doctype places the browser into "Limited Quirks" mode. Had you used XHTML Strict, or a full HTML4 Strict doctype, you would have seen the same gaps as you see with the HTML5 doctype as each of these places the browser in "Standards" mode.

Why does XHTML Strict produce a vertical gap too

See above.

Is it safe to use img { display: block; } in a reset.css sheet?

Of course, but there will probably be times when you'll want <img> to be treated as an inline element. In those cases, you'll need to add CSS in the appropriate places to achieve that.

这篇关于html5垂直间距问题与< img>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！