相信在前端开发中大家都会遇到浏览器的兼容性问题,这个问题网上有很多种解决方法,在此记录下我在开发中也遇到问题。
[color=blue]问题原因:具有透明背景的png格式图片在IE6中却不是背景透明的,透明背景部分会显示出#DBEAED的淡灰色,表现效果很糟糕,为了使用透明背景图片只有采用gif格式了,但是gif格式会出现明显的锯齿效果。办法就是使用IE Microsoft.AlphaImageLoader滤镜。
[/color]
[color=green]PS:使用DD_belatedPNG解决这个问题。[/color]
方法:
该方法主要使用了IE6的hack方法,IE6下识别 _filter。FF使用 background !important,但是在编写顺序上规则是:FF > IE。
参考:
[url]http://www.dillerdesign.com/experiment/DD_belatedPNG/[/url]
[url]http://www.zhangxinxu.com/wordpress/2009/08/ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/[/url]
[url]http://blog.csdn.net/boral_li/archive/2009/05/03/4144365.aspx[/url]
[color=blue]问题原因:具有透明背景的png格式图片在IE6中却不是背景透明的,透明背景部分会显示出#DBEAED的淡灰色,表现效果很糟糕,为了使用透明背景图片只有采用gif格式了,但是gif格式会出现明显的锯齿效果。办法就是使用IE Microsoft.AlphaImageLoader滤镜。
[/color]
[color=green]PS:使用DD_belatedPNG解决这个问题。[/color]
方法:
<style>
.png{
background: url(xxx.png) no-repeat !important;//IE7,IE7,FF识别
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="xxx.png")//IE6
background:none; //IE6
width:10px;
height:10px;
}
</style>
<div class="png">
背景PNG透明
<div>
该方法主要使用了IE6的hack方法,IE6下识别 _filter。FF使用 background !important,但是在编写顺序上规则是:FF > IE。
参考:
[url]http://www.dillerdesign.com/experiment/DD_belatedPNG/[/url]
[url]http://www.zhangxinxu.com/wordpress/2009/08/ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/[/url]
[url]http://blog.csdn.net/boral_li/archive/2009/05/03/4144365.aspx[/url]