IE8的一个BUG：Hack 兼容方案

字体真是个麻烦的东西，然后又是个重要的东西。为以更方的解决字体问题，就像上次推荐的《再谈 Web 默认字体》，为了Pixel Perfect，我们不断纠结。像支付宝在CSS Reset中是这样写的：

body{font:12px Tahoma,Helvetica,Arial,''宋体'',sans-serif} 

而淘宝这样写：

body, button, input, select, textarea {font:12px/1.5 tahoma,arial,''宋体'',sans-serif;} 

个人偏向于淘宝的写法，显然，button/input/select/textarea的字体都是要重设才会显示正常的。这里并不是为了讨论这个，而是这里面都有 tohama 这种字体，它是今天的主角。因为字体显示好，也因为导致 BUG 而被搬上台面。让我们来先看一个Demo:

Here: IE8 Tahoma Font-family bug

如果你是从 IE8 打开，将会看到第一个按钮有错位。如标题所说，你懂的，这就是 Tahoma 给我们带来的问题。而解决方案很简单，就是避用 tahoma 字体，其他的随便。比如：

body, button, input, select, textarea {font:12px/1.5 arial,''宋体'',sans-serif;} 

在支持没有那么完美的状况下，这样的解决方式可以说是完美的。即使你像我一样也有一套 Hack 兼容方案，还是不推荐使用暴力方式，我们的目标是、也应该是更有效、更优雅。

然后，其实 hack IE 8的时候，可以考虑 selector{property:value\0;} 这样的方法来，因为这是 IE8+ 独有的方法。Hmmm… 多好，虽然有点暴力。最后，推荐一下鸽子工友。解决这个 Bug，还得归功于他。

——————————–

经过一条完美分割线从火星来到地球，囧，刚刚还测试了arial放在前面是可以的，而且早上测试过，不过，事实证明测试要更小心，要多次，不然可能刷出来的是缓存。事实的解决方法似乎是这样的：

• 有中文和英文混排的时候，怎么写都无所谓；
• 只有中文的时候，放在前面最好的系统所拥有的字体，或者一种系统没有的字体来让他显示默认字体；
• 全英文就更是所所谓了

多谢帮助寻找真相的 Justice 和 默默同学，一个问到底，一个提供一个非中文的 IE8 显示效果图片。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!