IE9 中带有 HTML5 文档类型的行高答案

【问题标题】：Line height with HTML5 doctype in IE9IE9 中带有 HTML5 文档类型的行高
【发布时间】：2012-10-25 02:14:34
【问题描述】：

<!DOCTYPE html>
<html>
<body>
  <span style="font-size:48px">abc<br></span>
  <span style="font-size:6px">abc<br>abc</span>
</body>
</html>

只有当我使用 HTML5 doctype 时，IE9 才会在线条周围添加额外的边距。在  上添加font-size:0 或line-height:0 无效。

我怎样才能摆脱这些边距？

【问题讨论】：

【解决方案1】：

不同的浏览器处理这个问题的方式不同，但我不确定什么是正确的方法。我的直觉告诉我 IE 做对了，而 Firefox 做错了。（目前无法检查其他浏览器，抱歉。）

span 中的  使 span 高两行，由于它的字体大小为 48px，后半部分的基线比前半部分低 48 个像素。这就是第二个跨度开始的地方；它继续在同一基线上。

如果你想避免这种情况，不要将跨度与基线对齐，将它们对齐到顶部，通过放置

<style>span {vertical-align:top}</style>

在您的 HTML 中（在头部）。这样，第二个 span 中的文本将与行首而不是基线齐平。

【讨论】：

【解决方案2】：

如果我不亲自测试您的问题，我会问您是否尝试过给休息时间负边距？例如

<br style="margin-top:-3px" />

我不确定您在使用   时遇到的问题

但是我的另一个问题是你为什么要在正文中直接使用？根据你的例子，我建议如下（虽然我仍然不知道 100% 你想要完成什么）：

<!DOCTYPE html>
<html>
<body>
    <h1>abc</h1>
    <p>abc</p>
    <p>abc</p>
</body>
</html>

然后在您的 CSS 中，您可以为 <h1> 和  提供您需要的字体大小、行高等。

h1 {
    font-size:48px;
    margin-bottom:0;
}

另外，font-size:6px; 非常小，任何人都很难阅读。有时某些浏览器或设备甚至不会呈现那么小的字体大小，而是它们可能会自动将其呈现为font-size:10px;。我建议正文至少为 12 像素，最好还是大一点。

【讨论】：

负边距无效。我故意给出了非常小的和大的字体大小，以便您可以清楚地看到问题。当然，我可以编写不同的标记来达到我想要的结果。但这确实是一个基本的标记。我不敢相信 IE9 不能正确显示这个简单的标记。