IE下中英文不对齐的原因和解决办法

By , 18:35 - 6,399 views

为了能够兼容 IE6 和 IE8,我对模版再次进行了大修,过程无比惨烈。IE6 下莫名其妙的偏移,真让人恶心。偏偏 IE6 在国内的市场占有率高达 64%(cnzz 在09年12月的统计结果)。苟全性命于乱世,只求友好于用户,迫于无奈,奸荣之。(没有错别字哦 :mrgreen: )经过耐心的调整,这匹烂马终于给驯服了。在这过程中,IE 的中英文不对齐的问题尤其恼火。现在就和大家分享一下我找到的问题原因和解决办法。

我发现的文字不对齐有3种情况:

(一)当中英文对象的相邻元素加有vertical-align属性时。

原因分析:一般的按钮文字前面会带有一个小图片,图片、文本框和文字放在一起时,垂直方向会不对齐,我们会加上vertical-align:middle来使它们垂直对齐。这时,会出现下图所示的情况:

图1

这不是一般的不对齐呀。这一上一下的对齐就是微软遵守标准的真实写照。浮动这些他给你乱处理,达不到标准;滤镜他又给你乱加上,明明标准就没有。IE这浏览器实在是可割,可弃!

解决方法
a、最简单实用的办法,把中英文对象的字体改成宋体,这一切迎刃而解。

b、触发中英文对象的haslayout,也就是给图1中的img、a、span加上zoom:1或者display:inline-block等可以触发hasLayout的属性(hasLayout详解见这里)。

示例1:查看演示

PS:我是加了display来激活hasLayout,这样我才能通过css3标准检测,哇哈哈! :lol:

(二)当中英文对象的父元素加有vertical-align属性时。

原因分析:我们希望通过给父元素加上vertical-align:middle,这时,会出现下图所示的情况:

图2

和上一种造成的后果一样,就是垂直不对齐。

解决方法
a、把中英文对象的字体改成宋体,这个问题也可以解决(看来改字体还真不错耶)。

b、触发中英文对象的haslayout,再给给中英文对象加上vertical-align:baseline即可。

示例2:查看演示

(三)当中英文对象默认使用英文字体,并使用li做float时。

原因分析:中英文的文字基线不同。当默认才用英文字体时,中英文混合对象的英文会使用你指定的字体,而中文会使用浏览器默认的中文字体。例如:Arial字体下边缘要比宋体(同为12号)低一个象素,上边缘比宋体矮两个象素。这样就会让float的垂直位置严重偏移,如下图所示的情况:

图3

OMG,它出现了,它出现啦~~~它的出现让float一个比一个低。快要低到不能见人的时候,出现了反弹。这是何等的智能呀!这一刻AI、E.T.、Worm.msBlast、Worm.Sasser灵魂附体,它代表了ie悠久的历史和传统。让标准见鬼去吧!!

解决方法
a、哈哈,只要把字体改成宋体,也OK(哇塞,改字体万能了。)

b、(ie6下可以用,ie7下无效)还是改字体。英文用tahoma字体,中文用宋体(font-family:tahoma,arial,宋体,sans-serif; 我从淘宝复制来的字体)缺陷:使用tahoma字体时,在ie6及ie6以下版本,会导致所有中文字体链接的下划线会出现与字体粘连现象。

c、英文用Arial字体,中文用宋体(font-family:arial,宋体;)。再给中英文对象上加line-height:1.231属性。

示例3:查看演示

PS:全用宋体固然容易解决问题,但是宋体英文字是衬线字体,不好看呀(关于衬线字体的优缺点嘛,请见这篇文章)。所以,英文还是使用无衬线字体更美观大方。



本文如无特别说明,均属原创,转载请注明出处!
原文链接:http://iiu.me/archives/77

还没有人评论耶!要不您来一个:)

请您评论

 

健康游戏忠告:抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活
W3C 标准
[Valid RSS]
Valid XHTML 1.0 Transitional
Valid CSS!
分享
E:时间已做了选择 什么人叫做朋友 偶尔碰头 心情却能一点就通
H:因为我们曾有过 理想类似的生活 太多感受 绝非三言两语能形容
S:可能有时我们顾虑太多 太多决定需要我们去选择 担心会犯错 难免会受挫 幸好一路上有你陪我
合:与你分享的快乐 胜过独自拥有 至今我仍深深感动
好友如同一扇窗 能让视野不同 与你分享的快乐 胜过独自拥有 至今我仍深深感动 好友如同一扇门 让世界(变)开阔

无觅相关文章插件,快速提升流量