注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

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

2012-12-25 11:49:55|  分类: 兼容性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

[参与测试的浏览器: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><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>

  评论这张
 
阅读(51)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017