<img> 的 html5 垂直间距问题答案

【问题标题】：html5 vertical spacing issue with <img><img> 的 html5 垂直间距问题
【发布时间】：2011-06-21 17:43:35
【问题描述】：

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

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

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

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

但是在关闭这个帖子之前，有人可以向我解释一下为什么会这样：

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

【问题讨论】：

标签： css html xhtml grid

【解决方案1】：

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

首先，浏览器没有“HTML5 模式”。他们拥有三种模式“Quirks”、“Limited Quirks”（又名“Almost Standards”）和“Standards”模式。 “Limited Quirks”和“Standards”模式之间只有一个区别，这与为 <img> 所在的行框建立行高和基线的方式有关。在“Limited Quirks”模式下，如果行上没有呈现的文本内容，则不建立基线，<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 不需要这个技巧

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

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

见上文。

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

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

【讨论】：

感谢您的详细解释！现在一切都说得通了！
当图片特别小（比父块元素的line-height短）时，vertical-align:bottom会在图片上方留下一个空隙。希望很明显这是预期的：developer.mozilla.org/en-US/docs/Web/CSS/line-height“在块级元素上，line-height CSS 属性指定元素内行框的最小高度。”
tl;dr display:block on .

【解决方案2】：

我觉得这不是您要寻找的答案。太短了：

添加到 HTML5 页面的 CSS：img { display: block }。

在 Firefox 和 Chrome 中进行测试，这样做可以在两个页面之间获得像素完美相同的渲染。

【讨论】：

你说得对，它解决了我的问题。我到处寻找 HTML5 特定问题，但我错过了最基本的问题。

【解决方案3】：

vertical-align: baseline 导致图像底部出现间隙。

在 Strict doctypes 中，图像是内联元素，其行为类似于文本。即使没有任何文本，在基线处对齐内联元素也会使它们为文本下降器留出空间。

将img { vertical-align: bottom } 添加到您的重置样式表将解决问题。

【讨论】：

【解决方案4】：

试试这个代码：

<html>
<head>
<style>
div, span { border:1px dotted; height:100px; width:100px; }
</style>
</head>
<body>
  <span>100px</span>
  <div>100px</div>
</body>
</html>

当您认为<img> 是像<span> 这样的内联元素时...我认为您的大部分问题都已得到解答。

没有宽度/高度属性，您依赖的每个浏览器渲染引擎都是相同的（它们不是）。因此，除非您告诉浏览器要使用多少像素，否则像素完美将无法工作。

【讨论】：

w3schools 的 CSS 教程并没有接近正确地描述这个问题，这可能就是为什么它经常出现在 StackOverflow 上的原因。请不要将人们推荐给 w3schools，因为它的信息经常是错误的。见w3fools.com