IE6 png Fehler; Links funktionieren nicht?

Question

Nach vielen Stunden habe ich herausgefunden, warum die Links innerhalb meiner PNGs in IE6 nicht funktionieren.
Es liegt daran, dass ich filter: progid: dximagetransform.microsoft.alphanimageloader in meinem CSS verwende. Nach vielen weiteren Stunden habe ich keine Lösung gefunden, diese Links zu reparieren.

Hier ist mein Code ...

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);} 

Wie Sie dieses Problem beheben kann oder dies vermeiden und Vorschläge re: eine mögliche Lösung für die oben ?

Danke!

Answer 1

Versuchen Sie folgendes: http://www.hrunting.org/csstests/iealpha.html

Kurz:

Was zählt, ist, dass das Element mit dem Filter keine Position gesetzt hat und den Link in dem gefilterten Elemente eine Position gesetzt hat. Wenn dies der Fall ist, funktionieren Links innerhalb des gefilterten Elements.

Da Ihr #nav Element position: absolute hat, benötigen Sie einen Wrapper div um das hinzuzufügen und absolut Position stattdessen das.

Answer 2

Dies ist oft ein Problem mit der Verwendung eines Png-Fix auf etwas, das Links enthält, hat die Alpha-Version der twinhelix Png-Fix offenbar dieses Problem gelöst. Ich habe es benutzt, es ist ein wenig Buggy noch oder zumindest war es vor ein paar Monaten, aber direkt auf kleinen Seiten ist es produktionsbereit http://www.twinhelix.com/css/iepngfix/.

ich normalerweise das Twinhelix 1.0 Skript für alle Standorte, ich gehören ie6.css Sheet mit einem bedingten Kommentar zu IE6 Ziel:

<!--[if lt IE 7]> 
    <link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8"> 
<![endif]-->

Im Inneren befinden Sie dann in der CSS Sie gerade nennen es mit die 'behavior'-Regel. IE 7 und 8 tun transparent png ist gut. Sie müssen sicherstellen, dass Sie irgendwo ein blank.gif 1px by 1px transparent gif irgendwo haben und aktualisieren Sie die HTC-Datei (die wirklich nur JS ist), um den Pfad des Bildes zu verknüpfen.

#nav { 
    behavior: url(/css/iepngfix.htc); 
}

Ich hoffe, das hilft

Answer 3

Ich hatte ein ähnliches Problem, ich war einen transparenten Hintergrund verwenden, damit ich die png fix hätte anwenden müssen. Ich hatte ein div und einen Link um ihn herum, wie folgt aus:

<a href="#"><div id="bla"></div></a> 

Die Links wurden nicht in IE6 arbeiten. Als ich Position anwendete: relativ zu diesem bla div, es hat funktioniert! Position: relativ scheint auf IE6 Wunder wirken, sowie float: links manchmal ...