在使用PS设计的时候,会发现给12px的文字加下划线的时候,下划线会紧紧贴在文字下面,很不美观,FW CS3以下都很漂亮的分离了这两对小冤家。
但在编写页面的时候也会出现这样的情况。
以下是测试结果:

链接文字下划线贴住问题研究


从以上测试看出,当字体为tahoma的时候,下划线却紧紧的粘在了一起,而arial和verdana正常,另外gb2312下的宋体也正常。
其他浏览器我也做了测试,XP中:火狐在任何情况下,下划线均不粘在一起,chrome/opera/safari/ie8(正常渲染模式),任何情况下均粘在一起。

==============华丽的分割线================

而在VISTA中,问题更加严重,VISTA使用的宋体,让下划线再粘一层。

链接文字下划线贴住问题研究

以上测试均为IE8,vista下IE6/7可以忽略(默认安装的是IE8),另外,先前测试的chrome/opera/safari表现均和IE8相同。
而火狐表现则稍微好些,另外IE8开启EmulateIE7模式也和火狐一样了。

链接文字下划线贴住问题研究

这时我发现,只要把字体设置为13px,IE8和火狐下的下划线就乖乖的分开了,而chrome之类的也和先前12px的火狐相同,但郁闷的是tahoma在IE6下13PX字体表现为14px的字体。

链接文字下划线贴住问题研究

这里是我用chrome截取的新浪网页(下划线较多),感觉就像字被隐藏了一半似地,很痛苦。

链接文字下划线贴住问题研究

结论:
方法1. 字体使用tahoma 12px,开启IE8的EmulateIE7模式。
优点 表单对齐兼容性好,且文本对齐容易控制,空格不会太细。
缺点 IE6/chrome等浏览器下划线贴住,chrome等浏览器在vista下下划线帖掉某些文字最下面一个笔画。

方法2.字体使用arial和verdana 12px,开启IE8的EmulateIE7模式。
优点 IE6/ie7/IE8/FF3表现可接受,只有CHROME等国内不常用的浏览器会贴住,遇到表单对齐时独立定义tahoma字体。

方法3.字体使用字体使用arial和verdana 13px。
优点 所有浏览器在XP,VISTA下均不会产生下划线遮住笔画的问题,遇到表单时独立定义tahoma字体。
缺点 不能使用12px字体。