垂直和水平流動與線高度<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; }