怨念体 – 不同的字体有不同的line-height | 飞鱼 ^

27 Mar 2009

怨念体 – 不同的字体有不同的line-height

2009年3月27日 12:02 pm - 代码浅谈 - css

昨天某小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 回去慢慢看^_^

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

该文章已经被摸了279次。共有 12 条评论

1. 葉子 2009年3月27日 at 23:10₪

flash 要叠在层下面除了没有考虑ie8，其他浏览器只有ff2不行，用了css z-index，但是ff2有问题，flash用层包着，相对定位的z-index:0，然后flash本身设置绝对定位z-index:0，遮盖它的层z-index:100;这是为什么

回复
飞鱼 Reply:
March 27th, 2009 at 23:12
额~ 你走错地方了吧“ 这里是line-height 米有flash哎~~~

回复
2. 葉子 2009年3月27日 at 23:11₪

ff2显示flash还是在某层上面

回复
3. 葉子 2009年3月27日 at 23:13₪

显示正常的浏览器ff2 ff3 ie6 ie7 safari

回复
4. 葉子 2009年3月27日 at 23:14₪

说错了，ff2不正常

回复
5. 葉子 2009年3月27日 at 23:15₪

好，怎么变得这么····晕倒，不一样是问题嘛，blog留言也要这么讲究啊，真是，闪人了！！

回复
6. Anonymous 2009年3月31日 at 20:02₪

哈哈

回复
飞鱼 Reply:
March 31st, 2009 at 20:04
haha?

回复
7. Anonymous 2009年4月3日 at 5:00₪

哈哈。。。
从大猫那里过来瞅瞅。
怎么感觉那MM在梦游呢。。。

回复
8. bobo 2009年4月12日 at 4:32₪

好漂亮的皮哦，弱弱的问句能共享皮么？

回复
飞鱼 Reply:
April 12th, 2009 at 9:38
唉“ 这个问题貌似好多人问了“`~~ 因为还是半成品^_^ 熟了再分享呢

回复
9. bigCat 2009年7月20日 at 21:13₪

呃,懒得弄,就直接搞JS的浏览器判断,嘿嘿

回复