<small> 标签上带有行高的垂直和水平流

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; }