IE6 png错误；链接不起作用? [英] IE6 png bug; links don't work?

问题描述

几个小时后，我弄清楚了为什么IE6中的png内的链接不起作用.
这是因为我在CSS中使用了filter:progid:dximagetransform.microsoft.alphaimageloader.然而，经过许多小时，我仍未找到解决这些链接的解决方案.

After many hours I figured out why the links within my pngs in IE6 do not work.
It's because Im using filter:progid:dximagetransform.microsoft.alphaimageloader within my CSS. Yet after many more hours I have not found a solution to fixing these links.

这是我的代码...

HTML

<div id="fullwidth-header-wrapper">
  <div id="header"> <strong class="logo"> <a href="#">Google</a> </strong>
    <div id="nav">
      <ul> 
<span>
<span style="color: white;">Prefer</span>
Google? Click
<a href="http://google.com">here!</a>
</span>

       </ul>
    </div>
  </div>
</div>

CSS

#fullwidth-header-wrapper {
    height: 120px;
    }

#header {
      background:url(../images/header-bg.png) no-repeat 50% 0;
    height: 138px;
    width: 980px;
    margin: 0 auto;
    position: relative;
    top:0;
}

.logo{
    background:url(../images/logo.png) no-repeat;
    display:block;
    width:500px;
    height:125px;
    position:absolute;
    top:40px;
    left:85px;
}
.logo a{
    display:block;
    width:323px;
    height:85px;
    text-indent:-9999px;
    overflow:hidden;
}




#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png',  sizingmethod='crop');
display: inline;
position: absolute; 
top: -8px;
right: 30px;
width: 350px;
    height: 75px;
z-index: 150;
} 

#nav ul {
    position: relative;
    top: 18px;
    left: 0px;
    color: rgb(87, 175, 237);
    font-size: 96.8%;
    z-index:200;
}

#nav span {
           color: #fff;
           position: absolute; 
           top: 18px; 
           left: 0px;  
           font-size: 96.8%;
}

#nav a {color: rgb(255, 255, 255);}

您如何解决此问题或避免此问题，并提出建议:关于上述问题的可能解决方案?

How do you fix this issue or avoid this and suggestions re: a possible solution for the above?

谢谢！

推荐答案

请尝试以下操作: http: //www.hrunting.org/csstests/iealpha.html

简而言之:

重要的是，带有过滤器的元素没有位置设置，而经过过滤的元素中的链接具有位置设置.如果是这种情况，则过滤后的元素内的链接将起作用.

What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.

由于您的#nav元素具有position: absolute，因此您需要在该元素周围添加包装器div并对其进行绝对定位.

Since your #nav element has position: absolute, you'll need to add a wrapper div around that and absolutely position that instead.

这篇关于IE6 png错误；链接不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！