`

PNG在IE6下透明的css解决方案

    博客分类:
  • CSS
阅读更多

ie6并不是不支持png,它支持索引颜色的PNG-8,而是不支持RGB颜色的PNG-24。

ie6里的PNG-24图片做背景主要有以下几个问题:

一、ie6里png背景透明问题:解决办法用滤镜。这个一般高手们都知道。

注意:src 这个路径是指加载滤镜的页面相对于图片的路径,而不是css文件相对于图片的路径。这跟一般的图片加载有区别。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”图片名称”);
_ background-image: none;

二、ie6里png背景做循环问题:用一个2px*2px的半透明图片做背景循环。解决办法加“sizingMethod=scale”。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src=”图片名称”);
_ background-image: none;

三、ie6里不做循环的大png图片背景会出现区块被剪切,网站版面一片混乱,文字消失问题:解决办法加sizingMethod=crop。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop,src=”图片名称”)
_ background-image: none;

四、ie6里png背景下的的连接失效:解决办法给a元素添加样式position:relative;

五、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:。

六、最后关于png背景定位的问题。 我实在没想出来用解决的办法,我加了“sizingMethod=scale”。让它在ie6里放大去吧,虽然效果上没有FF好,但是总比贴着最左边看起来舒服。

/******************css***********************/

#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;}
/********************html*******************/

<div id="footer_content">
             <div id="ci_logo"></div>
</div>

分享到:
评论

相关推荐

    ie6下png图片透明解决方案(共2套)最新版

    看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色。特对一些优秀页面进行分析整合,整理了两套相当有效的解决方案,...

    ie6 png 透明的解决方法

    今天解决png图片在IE6下的背景透明问题,找到了一个好方法。之前的解决方案会造成错位,使页面变形。现把这个方法公布如下,本人亲测可以正常使用,如果你在使用中出现问题,请看实例中的说明(英文不精的童鞋可以用...

    IE6中 PNG 背景透明的最佳解决方案

    IE6中 PNG 背景透明的最佳解决方案 兼容IE6和Firefox的PNG背景透明CSS代码 IE6下png背景不透明问题的综合拓展

    ie6下png图片透明最终解决方案(共二套)

    看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色。今天特下载网上一些优秀页面进行分析整合,整理了两套相当有效的...

    IE6 PNG 透明

    然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e-xpression, 再到javascript透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我...

    IE6下png格式终极解决方案,IE7.js

    使用方法: 在页面中加入 &lt;!--[if lt IE 7]&gt; &lt;script type="text/javascript" src="javascript/IE7.js"&gt; ...然后在对应设置background的css中将图片名称加一个"-trans.png" 比如把bg.png改为bg-trans.png

    CSS解决方案:IE6中遇到png兼容性

    把背景图片如常的合并,利用相似于... 在问题1的基础上,针对IE6采用了CSS滤镜让其透明,但图片不能应用背景坐标定位的方式只能单张使用,这做法不利于带宽流量和请求链接数之余也不利样式的管理 在问题2的基础上,意

    png图片在ie6上的透明问题

    png图片在ie6上的透明问题解决方案,css样式文件引进的png和html中的png都有效。

    IE6下的png格式图片解决方案

    本来只是一张png透明图片,在IE下是很好解决的,我也尝试了很多种,包括js法,滤镜css法等等,感觉总体来说都不是很完美,而且如果同时使用Sprites方法,就不是那么简单容易的事情了。

    ie6-png解决方案1

    看了很多网上有关类似的文章,大部分只解决了插入图片或css背景调用,今天特下载网上优秀页面进行分析,整理了两套非常有效的解决方案,可以同时支持插入图片或css背景调用问题。

    ie6-png解决方案2

    看了很多网上有关类似的文章,大部分只解决了插入图片或css背景调用,今天特下载网上优秀页面进行分析,整理了两套非常有效的解决方案,可以同时支持插入图片或css背景调用问题。

    ie6-png解决方案01

    看了很多网上有关类似的文章,大部分只解决了插入图片或css背景调用,今天特下载网上优秀页面进行分析,整理了两套非常有效的解决方案,可以同时支持插入图片或css背景调用问题。

    DD_belatedPNG解决IE6不支持PNG绝佳方案

    /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/ // --&gt; 3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.

    IE6下Png透明最佳解决方案DD_belatedPNG

    是否有一种方法能解决全站的ie6下png透明问题呢。 搜遍谷歌,发现了一个最完美的解决方案:DD_belatedPNG(点解连接 查看官方). 原理 这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的...

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    它修复了许多的HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示。 使IE5,IE6兼容到IE7模式(推荐) &lt;!–[if lt IE 7]&gt; ”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript...

    IE6PNG:解决IE6不支持PNG的方法搜集

    滤镜解决方案滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行...

    aui-artDialog

    制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。 IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果 IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半...

    编写高质量代码-Web前端开发修炼之道.azw3

    4.7.11 z-index的相关问题以及Flash和IE 6下的select元素 4.7.12 插入png图片 4.7.13 多版本IE并存方案——CSS的调试利器IETester 第5章 高质量的JavaScript 5.1 养成良好的编程习惯 5.1.1 团队合作——如何...

Global site tag (gtag.js) - Google Analytics