ie6并非不支持png,它支持索引颜色的PNG-8,而是不支持RGB颜色的PNG-24。css
ie6里的PNG-24图片作背景主要有如下几个问题:html
1、ie6里png背景透明问题:解决办法用滤镜。这个通常高手们都知道。网站
注意:src 这个路径是指加载滤镜的页面相对于图片的路径,而不是css文件相对于图片的路径。这跟通常的图片加载有区别。url
*html 对应的id或class类名{background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/图片名称.png", sizingMethod="crop");}spa
2、ie6里png背景作循环问题:用一个2px*2px的半透明图片作背景循环。解决办法加“sizingMethod=scale”。orm
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src=”图片名称”);
_ background-image: none;htm
3、ie6里不作循环的大png图片背景会出现区块被剪切,网站版面一片混乱,文字消失问题:解决办法加sizingMethod=crop。索引
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop,src=”图片名称”)
_ background-image: none;图片
4、ie6里png背景下的的链接失效的解决办法:给对应元素添加样式position:relative;ci
连接所在的层以及父级,全都不能有position,不然的话连接无效,即便relative也不行!
5、ie7里png背景下的div下的dl dt dd ul li 等有float浮动时,链接文字在鼠标滑过出现一条背景消失的问题。解决办法是给包含dl dt dd ul li的div大盒子加上一个高度或最小高度。
min-height:50px; 由于ie6下没有这个问题,min-height:又是ie6不支持的,ie7和FF支持,而div要随着文字而伸长,因此我就采用了min-height:。
6、最后关于png背景定位的问题。 我实在没想出来用解决的办法,我加了“sizingMethod=scale”。让它在ie6里放大去吧,虽然效果上没有FF好,可是总比贴着最左边看起来舒服。
#footer_content{width:760px;height:85px;margin:0 auto;padding:80px 0 40px 150px;position:relative;}
#ci_logo{background:url(images/footer_logo.png) no-repeat;width:160px;height:85px;margin:0 auto;_background:none;
_filter:progid:dximagetransform.microsoft.alphaimageloader(src='/style/images/footer_logo.png', sizingMethod='crop');position:absolute;top:80px;left:12px;}
<div id="footer_content">
<div id="ci_logo"></div>
</div>
须要注意的是图片路径
.div{background:url(../images/w_bg.png) repeat center top;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/w_bg.png',sizingMethod='crop');}
.div{background:url(../images/w_bg.png) repeat center top;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/w_bg.png',sizingMethod='scale');}