最近讨论到了line-height的问题，做了一个实验，分别测试占主流的Firefox、IE6、IE7、IE8下的line-height的算法。
1.第一种情况，字体为宋体，在不设置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.第二种情况，，字体为宋体，设置font-size:12px，line-height :12px，在IE下给每一行文本都设置了背景色用来突出它的区域。
Firefox—-字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。
IE6—–字体实际高度为11px，在这个line-height值上，IE6很奇怪，字体向上突出了，下留白1px，上下所占空间为12px。
IE7—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。
IE8—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。
3.第三种情况，，字体为宋体，设置font-size:12px，line-height :14px，在IE下给每一行文本都设置了背景色用来突出它的区域。
Firefox—-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。
IE6—–字体实际高度为11px，在这个line-height值上，上留白为0，下留白3px，上下所占空间为14px。
IE7—–字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。
IE8—–字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。
4.第四种情况，，字体为宋体，设置font-size:12px，line-height :19px，在IE下给每一行文本都设置了背景色用来突出它的区域。
Firefox—-字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。
IE6—–字体实际高度为11px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为19px。
IE7—–字体实际高度为11px，上留白4px，下留白4px，上下所占空间为19px。
IE8—–字体实际高度为11px，上留白3px，下留白5px，上下所占空间为19px。
5.第五种情况，，字体为宋体，设置font-size:13px，line-height:20px，在IE下给每一行文本都设置了背景色用来突出它的区域。
Firefox—-字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。
IE6—–字体实际高度为12px，在这个line-height值上，上留白为3px，下留白5px，上下所占空间为20px。
IE7—–字体实际高度为12px，上留白4px，下留白4px，上下所占空间为20px。
IE8—–字体实际高度为12px，上留白3px，下留白5px，上下所占空间为20px。
6.第六种情况，字体为宋体，设置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，设置line-height:12px; font-size:20px。
在这种字体下字体的实际高度为12px，上留白为2px，下留白为4px，上下所占空间为18px。
总于到[貌似不完全，不能一一测试所有字体和所有浏览器]总结了：
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为偶数，而line-height为偶数：
Firefox下: 下留白(px)-1px = 上留白(px)
IE6下: 下留白(px)-3px = 上留白(px)
IE7下: 下留白(px)-1px = 上留白(px)
IE8下: 下留白(px)-1px = 上留白(px)
2.2 如果font-size为偶数，而line-height为奇数：
Firefox下: 下留白(px)-2px = 上留白(px)
IE6下: 下留白(px)-2px = 上留白(px)
IE7下: 下留白(px) = 上留白(px)
IE8下: 下留白(px)-2px = 上留白(px)
2.3 如果font-size为奇数，而line-height为偶数：
Firefox下: 下留白(px)-2px = 上留白(px)
IE6下: 下留白(px)-2px = 上留白(px)
IE7下: 下留白(px) = 上留白(px)
IE8下: 下留白(px)-2px = 上留白(px)
2.4 如果font-size为奇数，而line-height为奇数：
Firefox下: 下留白(px)-1px = 上留白(px)
IE6下: 下留白(px)-3px = 上留白(px)
IE7下: 下留白(px )-1px(或2px，因IE7下，如果font-size小于12，字体实际高度跟font-size是相同的)= 上留白(px)
IE8下: 下留白(px)-1px = 上留白(px)
3.经过测试如果单位为px，英文的衬线字体arial实际高度为font-size值 – 1px，而非衬线字体tahoma的字体实际高度就为font-size值。
来源：http://www.cnscorpio.cn/2009/06/line-height-2/
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。