十四像素

Home > xhtml+css > 小字体小行高兼容性分析及差异解决办法

小字体小行高兼容性分析及差异解决办法

4月 8th, 2009

[参与测试的浏览器：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的差异），需要设置字体为宋体。

解释：当字体为宋体的时候，各浏览器中上边距和下边距的差异都是较小的，出现问题的仅仅是IE6（行高为偶数时）与IE7（行高为奇数时），而IE6和IE7是可以很容易使用hack来通过padding的多少来精确控制其位置。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>line-height非常完美的兼容</title> </head> <style type="text/css"> * {margin:0; padding:0; list-style:none; } div { font-size:12px; font-family:simsun; line-height:15px; float:left; padding:1px 3px; *padding:0 3px 2px 3px; _padding:1px 3px; border:1px solid #000;} </style> <body> <div>十四像素 - 14px</div> </body> </html>

提示：你可以先修改部分代码再运行。

2. 如果确定标签内存在英文字符、数字、符号，可以设置英文字体，利用行高在15px下呈现的状态。

解释：此时仅ff3和chrome2浏览器存在些许差异，并且外观上不存在上多下少的边距。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>line-height:15px;font-family:arial时呈现比较理想的状态</title> </head> <style type="text/css"> * {margin:0; padding:0; list-style:none; } div { font-size:12px; font-family:arial; line-height:15px; float:left; padding:1px 3px; border:1px solid #000;} </style> <body> <div>十四像素 - 14px</div> </body> </html>

提示：你可以先修改部分代码再运行。

3. 如果不能保证是否存在英文字符、数字、符号，又需要设置英文字体保证美观，也可利用行高在15px下呈现的状态。（推荐）

解释：此时ie8浏览器下的状态不容乐观，上下差异太大：上0px，下4px，但可以利用:before伪类，赐它一个符号。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>line-height:15px;font-family:arial时呈现比较理想的状态（即使是纯中文）</title> </head> <style type="text/css"> * { margin:0; padding:0; list-style:none; } div { font-size:12px; font-family:arial; line-height:15px; float:left; padding:1px 3px; border:1px solid #000; } div:before { content:"1"; margin-left:-2000px; margin-right:1993px; } </style> <body> <div>十四像素</div> </body> </html>

提示：你可以先修改部分代码再运行。

Chomo xhtml+css IE8, line-height, xhtml+css

Comments (7) Trackbacks (1) Leave a comment Trackback

蝎子

5月 11th, 2009 at 16:56 | #1

Reply | Quote

微软就是不让人消停…
abeet

5月 27th, 2009 at 12:19 | #2

Reply | Quote

我记得对于中英文都有还要竖直中齐，字体使用Tahoma会Arial比好，
不如博主测试一下Tahoma字体的表现吧
Chomo

5月 27th, 2009 at 16:59 | #3

Reply | Quote

谢谢提醒。
最近我也看到了相关的文档，但我就是用的tahoma和arial测的英文字体，细节方面确实存在差异，在小高度下就会很难看。
Kingfo

11月 12th, 2009 at 13:36 | #4

Reply | Quote

对于我们这类要求高保真还原视觉设计设计时，保受其苦啊。。。。

顺便我也转了此文。

http://www.xintend.com/Article/line-height_font-size.aspx

感谢同学分享~~~ :^)
mikey

3月 4th, 2010 at 14:08 | #5

Reply | Quote

最近也想测试下各个浏览器line-height问题，就见到了你的这篇文章。觉得楼主做的很好。真的很感谢，省了我一大部分时间。太感谢了。我也转载了啊http://mikey.in/?p=12
玲玲

6月 4th, 2010 at 18:19 | #6

Reply | Quote

这个是在utf-8下面会出现的问题，在gbk下面没事。行距都是一样的
Chomo

6月 8th, 2010 at 20:04 | #7

Reply | Quote

@玲玲
^-^ 谢谢提示，还真没注意字符集的问题。。。