html - 标签上带有行高的垂直和水平流

Question

我正在为一个新网站整理我的排版，并且 <small> 出现了一个奇怪的现象标签 - 它把我的行高扔掉了。其他一切都很好(标题标签、段落等)，但 small正在把它扔到某个地方。

这是我的意思的图像:

我的问题是这个额外的一点点 line-height 在哪里？来自哪里，我该如何纠正？

在http://jsfiddle.net/nq2dt/ 有一个演示和下面的代码。

我正在使用 rem单位，所以这暂时不兼容 IE8 及以下版本。我使用的是 Firefox 19.0。

HTML

<div>
    <h1>Main Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p><small>Small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here small text goes here.</small></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div>
    <h2>Sub heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h3>Sub heading</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

html { font-size: 100%; }

body { font-size: 1rem; line-height: 1.75rem; font-family: open sans; text-align: justify; margin: 0; }

h1 { font-size: 2.625rem; margin: 0 0 1.75rem; }
h2 { font-size: 1.625rem; margin: 0 0 1.75rem; }
h3 { font-size: 1.25rem; margin: 0 0 1.75rem; }
p { font-size: 1rem; margin: 0 0 1.75rem; line-height: 1.75rem; }
small { font-size: 0.8125rem; }

div { width: 48%; margin: 0 1%; float: left; }

Answer 1

将行高设置为不带单位的小数似乎可以解决问题:

jsFiddle

small { font-size: 0.8125rem; line-height: 1.75; }

设置 display:block 似乎也解决了这个问题，但这显然不是一个真正理想的解决方法。

jsFiddle

small { font-size: 0.8125rem; display:block; }