IE中雅黑字体给布局带来的变化
作者：dudo 来源：dudo blog 发布时间：2008-06-13 11:22:00
5月20日，微软正式提供了Windows XP下可用的雅黑字体下载，雅黑字体是一款近乎完美的字体，解决了宋体小文字无法辩认的问题，特别是对于液晶显示器（LCD），在开启ClearType效果之后，你就会得到一个更加完美的视觉享受。我现在已经对雅黑着迷了，回头看默认为宋体的系统，锯齿太明显了，很丑。
但是这样随之而来的问题是，雅黑会对Internet Explorer中的布局页面影响。目前我发现的问题主要存在于两个方面：
一、下划线有时变成了删除线（视觉错位，并不是真正的删除线），在有英文和中文混排的段落中，下划线会被折断，变得相当不规则。
下面是google.cn首页的中文文字超级链接：
这个现象只会出现在中文字体中，英文字体不受影响：
如果有中英文混排的情况，就更加明显了：
可以看出，有中文的地方下划线都上移的，英文没有受到影响。
二、Internet Explorer中行高的变化
下面是我的博客中对一个有背景图片的超级链接的截图：
原来在宋体下正常的样式，现在在下面露出来了一块，这说明在Internet Explorer中行高增加了。但是在Firefox中并没有发生变化。
三、尝试解决
在Google.cn的截图中我们发现，右边的“登录”超级链接是正常的，这说明不是所有的中文超级链接都存在这样的问题，我仔细对照了一下他们样式上的差异，发现左面的链接比右面的“登录”多了一个样式：
vertical-align:top;
我把这个属性屏蔽掉之后一切正常。两样在第三张来自“魅族论坛”的这张截图中，我发现在虽然它没有在文字样子中出现vertical-align，但是在后面的两个小图片中有：
vertical-align:middle;
去掉这两个图片后，一切又正常了。
因此可以肯定，在中文的超级链接中使用vertical-align会出现问题（并不是每个元素都有vertical-align属性），最简单的解决方法就是，避免使用vertical-align或者valign，或者避免使用超级链接的下划线。当然这不是正确处理问题的好方法
至于在我博客中再现的这个问题，恰恰说明雅黑字体导致Internet Explorer（Firefox显示正常）中行高的增加，要解决这个问题，只需要控制得的高度就可以了，但是<a>是一个行内元素，没能设置高度，所以要配合disaply:block，然后再固定高度（不过，设置了block属性之后可能会产生自动换行，这时候你就要结合使用float等属性了）。我发现这个方法也能解决上面的问题，所以为超级链接固定高度会是比较好的方法。
额外说明：我是在Windows XP的基础上修改了默认字体，可能会因此而产生一些问题，上面我列举的两类问题我很难断定是由于雅黑字体本身引起的，还是其它不正确设置引起的。暂时没有找到Vista系统测试是否同样存在这样的问题，如果哪位有条件可以帮忙测试一下。
另外：这个问题存在于Internet Explorer的各个版本中，Firefox不受影响。
0
投稿猜你喜欢
- aspjpeg组件实现加水印函数的调用方法： <％printwater "/images/水印图片.gif",&q
任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” 小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、- 1. 相对与比较老的环境，建议使用第二个 set dbconnection=Server.CREATEOBJECT("ADODB.
- RegExp就是建立正则的对像。如:Set regEx = New RegExp regE
- 如何在线创建新表？下面我们以建立一个数码相机库用表为例，看看在ASP程序代码中使用 [CREATE TABLE 相机 (品牌 TEXT(10
- 1.获取function形参个数functionName.length2.较适用的运算符delete:删除以前定义的对象属性或方法的引用vo
- 有的时候，我们为了保持网页的美观，需要将较长的文字在一定长度时截断。比如我们希望在列表中显示文章标题的前15个字，那么一个这样的标题：“rs
- 简介Closure所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭
- 【原文地址】New "Orcas" Language Feature: Extension Methods【原文发表日期
- 本文总结了input的各种使用方法，挺全面的1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus
- 1、灵活运用样式熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也
- Truncate是SQL中的一个删除数据表内容的语句，用法是：TRUNCATE TABLE [Table Name]。下面是对Truncat
- 如何远程注册DLL？试试下面的代码：<％ Response.Buffer = True ％&g
- sys;//系统管理员，拥有最高权限 system;//本地管理员，次高权限 scott;//普通用户，密码默认为tiger,默认未解锁 s
- Response是负责将信息传递给用户的对象，它可动态地响应客户端的请求，并将动态生成的响应结果返回给客户端浏览器。 一，Resp
- 内容摘要：严格地说，ASP 并不是一门编程语言，所以不存在类这一概念，我们这里说 ASP 类是指 A
- 作为一个非设计出生的研究思路偏向的设计师，带着少了设计师自恋和自怜的眼光，我记下最近一年来感受到的交互设计师的尴尬。交互设计师就是出界面的，
- 阅读上一篇：微软建议的ASP性能优化28条守则(4)技巧 13：避免重新确定数组的维数 应尽量避免 Redim 数组。就性能而言，如果计算机
- 所谓“评论”不是必须得有文本框，用户录入提交数据才算，广义上的评论包括用户的任何“表态”，典型如打分。我接触电子商务时间并不长，最早应该是0
- 名称：YUI Compressor最新版本：2.4.2用途：js/css压缩必备指数：使用难度：（YUI Compressor非常易用，只是
