Arial字体的bug？
今天在做 CSSer 的读书页面的时候发现一个奇怪的问题，就是我设置好浮动的链接出现了问题，最后一个单独在一行的链接并没有浮动到左边，而是浮动到了右边。大家可以看下代码先：
<!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=gb2312" />
<title>Arial 字体的问题</title>
<style>
body { font:12px Arial, "宋体", Verdana, sans-serif}
div { padding:1px 1px 5px 1px; margin-bottom:10px; width:350px; font-size:12px;}
ul { margin:0 5px; margin-left:-4px; overflow:hidden; }
li { float:left; padding:0; display:inline; margin-left:11px; margin-bottom:5px; }
li a { background:#FCFCFC; display:block; float:left; width:123px; padding:5px; font-weight:600; color:#6F1197; border:1px solid #000000; }
</style>
</head>
<body>
<div>
<ul>
<li><a href="/m.php?name=readbook" title="读书首页">读书首页</a></li>
<li><a href="/m.php?name=readbook&mo_catid=1" title="CSS">CSS</a></li>
<li><a href="/m.php?name=readbook&mo_catid=2" title="JavaScript">JavaScript</a></li>
<li><a href="/m.php?name=readbook&mo_catid=3" title="用户体验">用户体验</a></li>
<li><a href="/m.php?name=readbook&mo_catid=4" title="艺术设计">艺术设计</a></li>
</ul>
</div>
</body>
</html>
大家可以复制到本地看一下，或者到这个页面看下，最后一个链接“艺术设计”本应该在左边的，但是它却跑到了右边。这是什么问题呢？
经过一步步的排查，发现是 body 里边字体的定义问题，而这个问题就出现在 Arial 上，如果把它去掉，问题就解决了，各位不妨试一下，不知道这算不算是一个 bug？另外，如果不想去掉 Arial 字体，可以给 div 或者其他里边加一个 line-height，便可解决问题。
以上测试所出现的问题仅在 IE6、IE7、IE8 Beta1、Opera 9.52 中出现，在 Firefox 3.0.1 和 Safari 3.1.1 没有这个问题。
标签： Arial
这篇文章发布于 2008年08月28日，星期四，21:16，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
