[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]
浏览器们缺乏党的教育,对行高没有统一的认识,于是在小字体小行高的情况下,总出现肉眼可见差异,对美观产生了举足轻重的影响。
要解决这一细节性的问题,我们首先得进行一番测试来了解各浏览器对于行高的认识,由于仅小行高和小字体影响比较大,我们就不探究其细节规律(比如字体大小对变化速度的影响规律)了,能在一定程度上解决问题便达到了我们想要的效果。
以下是经过一番头晕眼花的测试后得出的实验数据:
大小 | 行高 | 浏览器 | 宋体 | Arial纯中文 | Arial带英文字符 | |||
---|---|---|---|---|---|---|---|---|
上边距 | 下边距 | 上边距 | 下边距 | 上边距 | 下边距 | |||
12px | 14px | ie6 | 0px | 3px | 0px | 3px | 1px | 2px |
12px | 14px | ie7 | 1px | 2px | 0px | 3px | 1px | 2px |
12px | 14px | ie8 | 1px | 2px | 0px | 3px | 1px | 2px |
12px | 14px | ff3 | 1px | 2px | 2px | 1px | 2px | 1px |
12px | 14px | chrome2 | 1px | 2px | 2px | 1px | 2px | 1px |
12px | 14px | op9.6 | 1px | 2px | 1px | 2px | 1px | 2px |
12px | 14px | sf3 | 1px | 2px | 1px | 2px | 1px | 2px |
12px | 15px | ie6 | 1px | 3px | 1px | 3px | 1px | 3px |
12px | 15px | ie7 | 2px | 2px | 1px | 3px | 1px | 3px |
12px | 15px | ie8 | 1px | 3px | 0px | 4px | 1px | 3px |
12px | 15px | ff3 | 1px | 3px | 2px | 2px | 2px | 2px |
12px | 15px | chrome2 | 1px | 3px | 2px | 2px | 2px | 2px |
12px | 15px | op9.6 | 1px | 3px | 1px | 3px | 1px | 3px |
12px | 15px | sf3 | 1px | 3px | 1px | 3px | 1px | 3px |
12px | 16px | ie6 | 1px | 4px | 1px | 4px | 2px | 3px |
12px | 16px | ie7 | 2px | 3px | 1px | 4px | 2px | 3px |
12px | 16px | ie8 | 2px | 3px | 1px | 4px | 2px | 3px |
12px | 16px | ff3 | 2px | 3px | 3px | 2px | 3px | 2px |
12px | 16px | chrome2 | 2px | 3px | 2px | 3px | 2px | 3px |
12px | 16px | op9.6 | 2px | 3px | 2px | 3px | 2px | 3px |
12px | 16px | sf3 | 2px | 3px | 2px | 3px | 2px | 3px |
12px | 17px | ie6 | 2px | 4px | 2px | 4px | 3px | 3px |
12px | 17px | ie7 | 3px | 3px | 2px | 4px | 3px | 3px |
12px | 17px | ie8 | 2px | 4px | 1px | 5px | 2px | 4px |
12px | 17px | ff3 | 2px | 4px | 3px | 3px | 3px | 3px |
12px | 17px | chrome2 | 2px | 4px | 3px | 3px | 3px | 3px |
12px | 17px | op9.6 | 2px | 4px | 2px | 4px | 2px | 4px |
12px | 17px | sf3 | 2px | 4px | 2px | 4px | 2px | 4px |
由表可见
1. 需要外观上非常完美的呈现单行文本垂直居中(没有1px的差异),需要设置字体为宋体。