英文版IE6下中文字体变大之谜

有个客户的站点上,安装了Joomla的繁体中文语言包,并将繁体中文设置为默认语言后,客户报告说,页面上所有的文字都突然变大了好多。

接到报告后,我们想办法重现问题。然而不巧的是,使用中文版的IE6,IE7, IE8, Firefox3.6,都看不出字体大小的明显变化。最后突然发现客户的屏幕截图当中的IE是英文的,于是找了个英文版的IE6。果然,问题出现了!那么,到底是由于什么因素导致的呢?

通过分析,发现我们做的唯一改变就是语言的转换,尝试把语言换回默认的英文之后,问题没了。但是我们必须要站点的语言是繁体中文的,得找出问题的根源。最后,通过比较不同语言下的xhtml输出,发现了差别。

改变语言之前:


之后:


尝试后发现,导致IE6字体突然变大的原因,是lang=”zh-tw”这个属性,根据标准,这个属性用于向浏览器提示内容的语言,让浏览器选择合适的呈现方式。

一般情况下,对于zh-tw的语言设置,各种浏览器呈现出来的文字都会比en-gb时略宽。然后在英文版的IE6之下,当font-size为13px的时候,zh-tw语言下的文字将会明显变大……至少增大2px,font-size为其他值时这种变化却不明显。有趣的是,把语言设置为zh-cn却没有这问题。(可戏称为台湾问题?不谈政治^_^)

最后,通过修改模板,输出lang=”zh-hk”替代zh-tw来解决问题

IE6真是个怪物,可惜这怪物生命力似乎很顽强。

This entry was posted in WEB Application. Bookmark the permalink.

Leave a Reply