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

问题描述

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

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.

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

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.

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

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.

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

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?

在这里，我有相同的页面，没有任何变化，只是文档类型.XHTML 在每个浏览器中都是像素完美的，而 HTML5 则存在差距，并且因浏览器而异.

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.

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

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

更新:如果我包含 img { display: block; 的话，三十点回答了问题.HTML5 版本的行为与 XHTML 过渡版本完全相同.谢谢三十点！

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:

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

推荐答案

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

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 模式".他们拥有三种模式Quirks"、Limited Quirks"(又名Almost Standards")和Standards"模式.Limited Quirks"和Standards"模式之间只有一个区别，这与为 <img> 所在的行框建立行高和基线的方式有关.在Limited Quirks"模式下，如果行上没有呈现的文本内容，则不建立基线，<img> 位于行框的底部.

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.

在标准"模式下，行框始终包含低于基线的 g、p 和 y 等字符的下行空间，即使该行框中没有真正的字符.你看到的间隙是距离在基线和线框底部之间，这是那些下降线的空间.有关详细说明，请参阅 http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

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

因此，补救措施是阻止 被视为内联元素 { display:block;} 或覆盖 <img> { vertical-align:bottom; 的垂直对齐方式}.任何一个都可以.

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.

为什么 XHTML Transitional 不需要这个技巧

Why does XHTML Transitional not need this hack

使用 XHTML Transitional doctype 将浏览器置于Limited Quirks"模式.如果您使用 XHTML Strict 或完整的 HTML4 Strict doctype，您会看到与使用 HTML5 doctype 相同的差距，因为这些中的每一个都将浏览器置于标准"模式.

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.

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

Why does XHTML Strict produce a vertical gap too

见上文.

使用 img { display: block; 是否安全?} 在 reset.css 表中?

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

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

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.

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