Question

我正在开发一个需要跨多个浏览器工作的网站，不幸的是也包括IE6。

我正在使用滑动门技术制作适用于Chrome，Safari和FF的精美按钮，但这些图像在IE6中完全不可见。更奇怪的是，它不是所有的图像，只是按钮背景。我放入实际按钮的图标渲染得很好。知道为什么吗？

HTML:
    <a id="re" href="#" class="button"><span><span class="resolved">Mark as Resolved</span></span></a>


CSS:
  a.button
  {
   background:transparent url(images/normal_end.png) no-repeat scroll top right;
   display:block;
   float:left;
   height: 32px;
   padding:3px;
   padding-right: 5px;
   margin:4px;
   text-decoration:none;
   color:#555;
   font-weight:normal;
   width:100px;
   font-size: 15px;
  }
  a.button span 
  {
   background: url(images/normal.png) no-repeat;
   display:block !important;
   line-height:22px;
   padding:0 5px 0 5px;
  }

Answer 1

在挖掘之后我发现这篇文章http://24ways.org/2007/supersleight-transparent-png-in-ie6解释了我的问题。

Internet Explorer 6无法处理png上的Alpha通道透明度。

将此放在这里以防其他人遇到同样的问题，并像我一样在这里寻找解决方案。

Answer 2

IE6的png图像存在问题，但您可以将图像作为div的背景。

<body>  
<div class="imageyouneed"></div>  
</body>

<style>  
body {background-color:#000}  
div.imageyouneed {background:url(flower-transparent.png) no-repeat; height:100px;width:100px}  
</style>

<!--[if gte IE 5]>  
<style type="text/css">  
  div {  
  background:none;  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flower.png',sizingMethod='crop');  
  }  
</style>  
<![endif]-->

请注意，高度和宽度是图像的高度和宽度。

＆GT;有的＆LT;图片未在IE6中显示

2 个答案: