最近討論到了line-height的問題，做了一個實驗，分別測試占主流的Firefox、IE6、IE7、IE8下的line-height的算法。

1.第一種情況，字體為宋體，在不設(shè)置line-height時，font-size:12px。

Firefox—-字體實際高度為11px，上留白1px，下留白2px，上下所占空間為14px。

IE6—–字體實際高度為11px，上留白0，下留白3px，上下所占空間為14px。

IE7—–字體實際高度為11px，上留白0，下留白1px，上下所占空間為12px。

IE8—–字體實際高度為11px，上留白0，下留白1px，上下所占空間為12px。

2.第二種情況，，字體為宋體，設(shè)置font-size:12px，line-height :12px，在IE下給每一行文本都設(shè)置了背景色用來突出它的區(qū)域。

Firefox—-字體實際高度為11px，上留白0，下留白1px，上下所占空間為12px。

IE6—–字體實際高度為11px，在這個line-height值上，IE6很奇怪，字體向上突出了，下留白1px，上下所占空間為12px。

IE7—–字體實際高度為11px，上留白0，下留白1px，上下所占空間為12px。

IE8—–字體實際高度為11px，上留白0，下留白1px，上下所占空間為12px。

3.第三種情況，，字體為宋體，設(shè)置font-size:12px，line-height :14px，在IE下給每一行文本都設(shè)置了背景色用來突出它的區(qū)域。

Firefox—-字體實際高度為11px，上留白1px，下留白2px，上下所占空間為14px。

IE6—–字體實際高度為11px，在這個line-height值上，上留白為0，下留白3px，上下所占空間為14px。

IE7—–字體實際高度為11px，上留白1px，下留白2px，上下所占空間為14px。

IE8—–字體實際高度為11px，上留白1px，下留白2px，上下所占空間為14px。

4.第四種情況，，字體為宋體，設(shè)置font-size:12px，line-height :19px，在IE下給每一行文本都設(shè)置了背景色用來突出它的區(qū)域。

Firefox—-字體實際高度為11px，上留白3px，下留白5px，上下所占空間為19px。

IE6—–字體實際高度為11px，在這個line-height值上，上留白為3px，下留白5px，上下所占空間為19px。

IE7—–字體實際高度為11px，上留白4px，下留白4px，上下所占空間為19px。

IE8—–字體實際高度為11px，上留白3px，下留白5px，上下所占空間為19px。

5.第五種情況，字體為宋體，設(shè)置font-size:13px，line-height:20px，在IE下給每一行文本都設(shè)置了背景色用來突出它的區(qū)域。

Firefox—-字體實際高度為12px，上留白3px，下留白5px，上下所占空間為20px。

IE6—–字體實際高度為12px，在這個line-height值上，上留白為3px，下留白5px，上下所占空間為20px。

IE7—–字體實際高度為12px，上留白4px，下留白4px，上下所占空間為20px。

IE8—–字體實際高度為12px，上留白3px，下留白5px，上下所占空間為20px。

6.第六種情況，字體為宋體，設(shè)置font-size:13px， line-height:21px。

Firefox—-字體實際高度為12px，上留白4px，下留白5px，上下所占空間為21px。

IE6—–字體實際高度為12px，上留白3px，下留白6px，上下所占空間為21px。

IE7—–字體實際高度為12px，上留白4px，下留白5px，上下所占空間為21px。

IE8—–字體實際高度為12px，上留白4px，下留白5px，上下所占空間為21px。

7.第七種情況，字體為tahoma，設(shè)置line-height:12px; font-size:20px。

在這種字體下字體的實際高度為12px，上留白為2px，下留白為4px，上下所占空間為18px。

總于到[貌似不完全，不能一一測試所有字體和所有瀏覽器]總結(jié)了：

1.宋體下如果用px做為單位，且顯示的字體為宋體，則，8px<font-size<18px時font-size(px) = 字體實際高度(px)+1px；font-size<9px時font-size(px) = 字體實際高度(px)；font-size>17px時font-size(px) = 字體實際高度(px)+2px。

2.宋體下如果用px做為單位，且顯示的字體為宋體，line-height = 字體實際高度(px)+上留白(px)+下留白(px)

2.1  如果font-size為偶數(shù)，而line-height為偶數(shù)：

Firefox下: 下留白(px)-1px = 上留白(px)

IE6下: 下留白(px)-3px = 上留白(px)

IE7下: 下留白(px)-1px = 上留白(px)

IE8下: 下留白(px)-1px = 上留白(px)

2.2  如果font-size為偶數(shù)，而line-height為奇數(shù)：

Firefox下: 下留白(px)-2px = 上留白(px)

IE6下: 下留白(px)-2px = 上留白(px)

IE7下: 下留白(px) = 上留白(px)

IE8下: 下留白(px)-2px = 上留白(px)

2.3  如果font-size為奇數(shù)，而line-height為偶數(shù)：

Firefox下: 下留白(px)-2px = 上留白(px)

IE6下: 下留白(px)-2px = 上留白(px)

IE7下: 下留白(px) = 上留白(px)

IE8下: 下留白(px)-2px = 上留白(px)

2.4  如果font-size為奇數(shù)，而line-height為奇數(shù)：

Firefox下: 下留白(px)-1px = 上留白(px)

IE6下: 下留白(px)-3px = 上留白(px)

IE7下: 下留白(px )-1px(或2px，因IE7下，如果font-size小于12，字體實際高度跟font-size是相同的)= 上留白(px)

IE8下: 下留白(px)-1px = 上留白(px)

3.經(jīng)過測試如果單位為px，英文的襯線字體arial實際高度為font-size值 – 1px，而非襯線字體tahoma的字體實際高度就為font-size值。

PS:另外關(guān)于line-height的其他知識可以看看mayer的：http://meyerweb.com/eric/css/inline-format.html

原文：http://www.cnscorpio.cn/2009/06/line-height-2/