关于ie中用png图片做背景的众多问题的解决

午梅2008-10-09 18:45:07

  我一直象用png做背景来设计一个网站,遂尝试了一个站的设计,不料遇到了用png图片做背景的众多问题。这些问题都是围绕ie6 ie7的。所以啊,微软真是贡献极大啊,让我绞尽了脑汁啊,没有ie6,工作生活得失去多少思考的乐趣啊。开始我根本不想考虑ie6,想把ie6完全淘汰掉,我直接用FF做的。后来考虑还是照顾一下没有升级的不会升级的守旧的朋友们的感官,所以把ie6的也做了出来。

  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好,但是总比贴着最左边看起来舒服。实在看着不顺眼的话就升级浏览器吧!~

wumei.freeren.org

上一篇:如何使现有的Web 站点符合标准,易于维护---网站重构(二)
下一篇:div+css 文字弧形排版

  • >> more看看其他人的看法
  • 您好!你知道,如果他们做任何的插件,以保护防止黑客的攻击?失去一切,我努力,我有点偏执。有什么建议?

  • 1 one hour payday loans 2012-1-13 01:25 Friday
  • }
  • 来自科罗拉多州的问候!我很无聊的工作,所以我决定我的iPhone上浏览您的博客,在午休。在这里,我喜欢你目前的知识,不能等待去看看,当我回家。我很惊讶于你的博客如何快速加载在手机上..我什至不使用无线上网,只是3G ...总之,美仑美奂的博客!

  • 2 search engine optimization vancouver 2012-1-13 15:31 Friday
  • }
  • 您好只想给你一个快速的抬起头来,让你知道几个图像不正确加载。我不知道为什么,但我认为其连接问题。我试过在两个不同的浏览器,都表现出同样的的结果。

  • 3 oh canada 2012-1-21 10:48 Saturday
  • }

有什么想说的吗?