IE的PNG黑边及字体锯齿

众所周知IE从7.0开始支持PNG图片的显示,但是其实也是不完整的支持,只能算是一个work around吧,让PNG在大多数时候都显示正常。完完全全的从根本上支持PNG甚至连IE8也还没做到,具体原因可以参考IE的PNG开发人员写的一篇Blog:

http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

简单地说,PNG的支持问题在于IE7及以上版本使用了filter来支持PNG的Alpha通道,所以对于PNG来说其实已经偷偷被应用了一个filter了。虽然解决了主要的PNG透明问题,不过也伴随着另一个副作用,就是不能再应用其他filter。或者准确地说是应用其他filter会破坏IE对PNG的支持。这就是为什么PNG在渐隐和渐现的时候会有难看的黑边。上面这篇Blog已经从侧面解释了这个问题了。所以理论上说,这个情况是无解的……

另外一个问题是字体。很多朋友都会发现IE中的字在渐隐渐现的时候也会出现难看的锯齿。特别是加了bold的字体。其实从上面的原因已经可以看出问题来了。IE对字体抗锯齿和加粗的支持似乎也都来自filter的效果。其他的filter破坏了本来的filter,导致出现难看的锯齿。这里又有另外一个问题,就是字体的标准尺寸。虽然可以通过font-size为字体指定尺寸,但是并不是所有尺寸都有对应的字体的。在没有的时候,就只能通过浏览器的缩放了。看来IE又是用了filter吧,不然怎么会这么难看?同理,bold字体貌似也是这个原因。所以在要对一个区域做fade和appear效果的时候,使用标准字体尺寸(如small, medium, large等)可以在一定程度上减轻难看的锯齿。这点纯属本人推测,就拿不出具体证据来了啊。

IE还有相当长的路要走啊,赶快赶上其他浏览器的脚步吧。

原文地址:https://www.cnblogs.com/yaoxing/p/2179657.html