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

发布时间：2018-09-01 08:17 所属栏目：30 来源：站长网

导读：[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome 2 ] [操作系统：Windows] 浏览器们缺乏党的教育，对行高没有统一的认识，于是在小字体小行高的情况下，总出现肉眼可见差异，对美观产生了举足轻重的影响。要解决这一细节性的问题，我们

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

浏览器们缺乏党的教育，对行高没有统一的认识，于是在小字体小行高的情况下，总出现肉眼可见差异，对美观产生了举足轻重的影响。

要解决这一细节性的问题，我们首先得进行一番测试来了解各浏览器对于行高的认识，由于仅小行高和小字体影响比较大，我们就不探究其细节规律（比如字体大小对变化速度的影响规律）了，能在一定程度上解决问题便达到了我们想要的效果。

以下是经过一番头晕眼花的测试后得出的实验数据：

由表可见

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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

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> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

出自：http://www.14px.com

（编辑：ASP站长网）