垂直＆amp; <small>标记</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; }