9

我拿了一个 DTD 为 HTML4 Transitional 的页面，并将 doctype 更改为，<!DOCTYPE html> 并且在其下方的 h1 和 div 之间出现了额外的空间。我没有对标记或 CSS 进行任何其他更改。

JSFiddle 示例：http: //jsfiddle.net/ngordon/vSqkg/3/。

如果将 doctype 从 HTML5 更改为 HTML4 Transitional，即使标记和 CSS 完全相同，您也会看到多余的空间出现和消失。

知道如何摆脱那个空间吗？

4

5 回答 5

12

HTML 4.01 过渡文档类型在浏览器中导致几乎标准模式。HTML5 文档类型导致标准模式。

这篇 Microsoft 文章解释了差异：http: //msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29。

它说对于几乎标准模式：

当且仅当满足以下条件之一时，内联元素才会影响行高。

如果元素：

  • 包含文本字符

  • 具有非零边框宽度

  • 具有非零边距

  • 具有非零填充

  • 有背景图片

  • 将垂直对齐设置为基线以外的值

请注意，换行符不被视为此定义的文本字符，除非它是行框的唯一内容。在这种情况下，无论指定的行高如何，行框高度仍然是该行的最高行内框顶部和最低行内框底部。

如果 img 元素是表格单元格的唯一内容，则将单元格行框高度的行框高度调整为零。

在您的情况下，最关键的是，这意味着计算包含图像的行的高度不包括strut，一个虚构的内联元素，它应该将行高增加到元素的行高值h1。

这个jsfiddle显示了一个真实的span元素，其中包含一个&nbsp;作为支撑的真实文本内容，您可以看到 HTML 4.01 过渡文档类型和 HTML5 文档类型的布局是相同的。

这个jsfiddle显示了相同的想法，只是这次 strut 是使用 CSS 制作的，如下所示：

h1:before {
   content: '\A0';
}

在 khurram 的回答的情况下，他正在做的是减少行高，h1因此，在标准模式下，支柱的高度小于图像的高度。这意味着整个线条的高度是由图像的高度决定的，而不是支柱的高度。在标准模式和几乎标准模式下，图像的高度是相同的，所以同样，您看不到两种模式之间的渲染差异。

至于为什么设置 line-heighth1以匹配图像的高度（25px）不起作用，但将其设置为 12px，那是因为 strut 不仅建立了顶部和底部，而且还建立了基线线。基线略高于底部以允许文本下降，对于通常约为 3 像素的正常大小的文本。默认情况下，图像位于基线上，因此基线和底部之间的间隙被添加到图像的高度以建立线的高度。

这可以通过使用 将图像移出基线来解决img { vertical-align: top }，这在jsfiddle中显示。如果您在此处修改 h1 行高，您将看到大于 25px 的值会增加行间距，但小于或等于 25px 的值不会更改该间距。

于 2012-06-27T00:28:29.543 回答
3

在开始应用任何其他 css 效果之前，您是否已将 css重置http://meyerweb.com/eric/tools/css/reset/应用到 css？

于 2012-06-26T11:56:32.693 回答
3

您的错误处理默认行高。

HTML4 过渡忽略 H1 wrt 行高的内容，产生一个 25px 高的元素。HTML5 尊重 H1 标签的行高，相当于 29 像素。

于 2012-06-26T11:59:22.477 回答
2

只是给line-height:12px;或你想要的。
看一看： JSFIDDLE。修改您的代码。

于 2012-06-26T11:58:51.260 回答
0

这就是为什么 HTML5 Boilerplate 有一个 CSS 重置。

您也可以只将 div 设置为 a margin: 0; padding: 0;，但您必须对每个元素都执行此操作，直到您将它们全部击中。Meyer 在这个线程中关于 CSS 重置的答案是正确的。

这是解决方法的一个示例：http: //jsfiddle.net/mikelegacy/vSqkg/5/

于 2012-06-26T21:27:39.513 回答