IE6 png bug; les liens ne fonctionnent pas?

Question

Après plusieurs heures, j'ai compris pourquoi les liens dans mes pngs dans IE6 ne fonctionnent pas.
C'est parce que j'utilise filter: progid: dximagetransform.microsoft.alphaimageloader dans mon CSS. Pourtant, après beaucoup plus d'heures, je n'ai pas trouvé de solution pour corriger ces liens.

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

Comment résoudre ce problème ou à éviter cela et suggestions re: une solution possible au-dessus ?

Merci!

Answer 1

Essayez ceci: http://www.hrunting.org/csstests/iealpha.html

En bref:

Ce qui importe est que l'élément avec le filtre n'a pas de position fixé et le lien dans l'élément filtré a une position définie. Si c'est le cas, les liens dans l'élément filtré fonctionneront.

Depuis votre élément #nav a position: absolute, vous aurez besoin d'ajouter un div wrapper autour de cela et tout à fait position à la place.

Answer 2

Cela est souvent un problème avec l'utilisation d'une correction png sur quelque chose qui contient des liens, la version Alpha du correctif twinhelix png a apparemment résolu ce problème. Je l'ai utilisé, c'est encore un peu bogué ou du moins il y a quelques mois, mais utilisé sur de petits sites, il est prêt pour la production http://www.twinhelix.com/css/iepngfix/.

J'utilise normalement le script twinhelix 1.0 pour tous nos sites, je comprennent une feuille de style ie6.css un commentaire conditionnel visant à IE6:

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

là à l'intérieur vous ensuite dans le CSS vous suffit d'appeler à l'aide la règle 'behavior'. IE 7 et 8 font png transparent juste très bien. Vous devez vous assurer que vous avez un gif transparent blank.gif 1px par 1px quelque part et mettre à jour le fichier htc (qui est vraiment juste JS) pour lier le chemin de cette image.

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

J'espère que cette aide

Answer 3

J'ai eu un problème similaire, je travaillais avec un fond transparent, donc je devais appliquer le correctif de .png. J'ai eu un div et un lien autour d'elle, comme ceci:

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

Les liens ne fonctionnaient pas du tout dans IE6. Quand j'ai appliqué la position: par rapport à ce bla div, ça a marché! position: relative semble faire des merveilles sur IE6, ainsi que float: à gauche parfois ...