九乡新闻网茅场町-日本桥:IE下中英文不对齐的原因和解决办法 – 学而得
来源：百度文库 编辑：九乡新闻网 时间：2024/05/04 16:38:50
IE下中英文不对齐的原因和解决办法
By iiu, 2010/02/07 - 668 views为了能够兼容 IE6 和 IE8，我对模版再次进行了大修，过程无比惨烈。IE6 下莫名其妙的偏移，真让人恶心。偏偏 IE6 在国内的市场占有率高达 64%（cnzz 在09年12月的统计结果）。苟全性命于乱世，只求友好于用户，迫于无奈，奸荣之。（没有错别字哦 
）经过耐心的调整，这匹烂马终于给驯服了。在这过程中，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标准检测，哇哈哈！ 
（二）当中英文对象的父元素加有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：全用宋体固然容易解决问题，但是宋体英文字是衬线字体，不好看呀（关于衬线字体的优缺点嘛，请见这篇文章）。所以，英文还是使用无衬线字体更美观大方。