昨天某小P孩告诉我: 飞鱼~~破啦~~~. 我回答:什么破啦(处女M? =.=) 这撕说:你的页面破了….
汗~~~~
看了下果然破了=.= 是我的页面在IE8下 被破了. 导航上的字下垂~

=.= 因为米有IE8 所以没发现啦. 不过后来去大猫那下了个IEtester 最新版的给补上了.

然后再调试的时候发现N多神奇的东东.

情况如下:
发现IE6,IE7,chrome,FF都正常. 就是IE8下垂了. 哎~~~
然后就上网找找看 有么有IE8 hack 发现了这么张图.点击查看大图

我就囧了, IE8果然比较啜~~~ 米有 针对IE8的hack

但是 经常使用hack 说明你的css 可能不到家.所以就继续研究. 然后发现了还是可以解决问题的.

就是像题目所说的,不同的字体有不同的line-height 这个问题我之前写的时候就发现了.
PS:对line-height 不太了解的请 猛击这里 – 相当好的一篇文章

发现 font-family:Verdana 字体 显示中文的时候 在 不同的浏览器里 有不同的现实效果.
现象如下:
拿font-size:12px; line-height:1.6em 来说吧,

  • IE6,IE7 呈现 效果一样
  • FF chrome 呈现 下垂1px 左右.(可以用hack来解决)
  • IE 8 下垂 2px 左右 (暂时米办法=.=)

然后继续研究, 因为之前 试验过 用 “宋体” 发现呈现都一样. 于是将 font-family:simsun (飞鱼:simsun 是 宋体的意思. 以前我直接写”宋体”,后来出现ie6 不识别的问题就么用过了. )
PS: 其实我发现simsun 在”喂死它”Vista 下显示 是雅黑, 如果你用”宋体”的话,在Vista 下 显示是宋体, 大概simsun 有点类似 系统默认中文字的感觉

果然,将font-family改成 simsun 问题就解决了~~` 可爱的IE8不下垂了,呈现状况如下.

  • IE6 呈现上翘1px.(基本可以无视,或者用hack来消灭)
  • IE7 FF chrome IE8呈现 效果一样

所以得出结果.在做类似menu类的 精确到像素布局的, 然后又显示是中文的,建议将font-family改成 simsun 就能解决此类下垂问题.

好了希望碰到此问题的csser 了解.

PS:当然我这个东东只是 个人试验结果. 应该还有 更好的办法吧. 如果你有的话, 那么 请留言分享吧^_^

哟？不错哎 订阅飞鱼的RSS Feeds 回去慢慢看^_^

您可能还对这些日志感兴趣