经过几个小时后,我弄清楚为什么IE6中我的png中的链接不起作用 这是因为我在我的CSS中使用filter:progid:dximagetransform.microsoft.alphaimageloader。然而,经过多个小时后,我还没有找到解决这些链接的解决方案。
这是我的代码......
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);}
你如何解决这个问题或避免这个问题和建议:上面的可能解决方案?
谢谢!
答案 0 :(得分:10)
试试这个:http://www.hrunting.org/csstests/iealpha.html
简而言之:
重要的是具有过滤器的元素没有位置集,并且过滤后的元素中的链接具有位置集。如果是这种情况,过滤后的元素中的链接将起作用。
由于您的#nav
元素有position: absolute
,因此您需要在其周围添加一个包装div,并将其置于绝对位置。
答案 1 :(得分:0)
这通常是在包含链接的东西上使用png修复的问题,twinhelix png修复的Alpha版本显然已经解决了这个问题。我已经使用过它,它仍然是一个小小的车,或者至少是几个月前,但是在小型网站上使用它是生产就绪的 http://www.twinhelix.com/css/iepngfix/。
我通常在我们所有的网站上使用twinhelix 1.0脚本,我包含一个带有针对IE6的条件注释的ie6.css样式表:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->
然后你在CSS中使用'behavior
'规则调用它。 IE 7和8做透明png就好了。你确实需要确保在某处有一个1gx透明gif的blank.gif 1px并更新htc文件(实际上只是JS)以链接到该图像的路径。
#nav {
behavior: url(/css/iepngfix.htc);
}
我希望这会有所帮助
答案 2 :(得分:0)