1 
<!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打开<br>没有效果。

我怎样才能摆脱这些利润？

4

2 回答 2

4

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

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

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

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

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

在此处输入图像描述

于 2012-10-24T18:14:34.783 回答
0

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

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

我不确定您遇到的问题是哪种方式<br>

但我对你的另一个问题是你为什么<span>直接在体内使用？根据您的示例，我建议以下内容（尽管我仍然不知道 100% 您要完成的工作）：

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

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

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

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

于 2012-10-24T16:19:27.970 回答