Quelle est la solution préférée pour la fixation du contenu non cliquable après l'application d'un filtre IE6 pour PNGs?

Question

<div id="calendar">
  <p>Text</p>
  <div class="section">blah</div>
</div>

Je l'application de la PNG à #calendar, dans IE6 j'utiliser le filtre, mais il rend le contenu non cliquable - Je crois que la façon de contourner cela est de forcer tout à l'intérieur pour être positionné (par exemple la position :. relative) et un z-index + hasLayout mais parfois il ne fonctionne pas

Dois-je envelopper place toutes mes affaires dans un autre div et appliquer le BG à un .png nœud frère tel comme celui-ci, ou quoi?

<div id="calendar">
  <div id="calendar-bg"></div>
  <div id="calendar-content">
    <p>Text</p>
    <div class="section">blah</div>
  </div>
</div>

Alors forcer le calendrier bg être placé de façon absolue et la largeur / hauteur de 100%, et la position # relativement calendrier contenu sur elle? Ou est-il une autre façon cachée que les scripts de fixateurs le courant dominant (ala htc, jquery.pngFix) fonctionnent-ils?

Answer 1

C'est en effet la (seule) solution correcte à ce problème jamais je suis tombé. Vous ne pouvez pas compter sur votre première solution (positionnement des Childs relativement), parce que le filtre d'opacité dans IE est jeté sur tous les éléments de l'enfant, avec les éléments de l'enfant de ne pas être cliquable en conséquence.

Il suffit donc de vous assurer que le .png est pas dans l'élément parent d'un élément cliquable.

Alors, créez un parent avec la propriété "position: relative. (Ou absolu, dépend de votre mise en page) et insérez deux enfants pour le fond et le contenu réel

Exemple:

<div id="calendar">
   <div id="calendar-bg"></div>
   <div id="calendar-content">
       <p><a href="#">Text</a></p>
   </div>
</div>

 
 #calendar { position: relative; }
 #calendar #calendar-bg { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; /* Or the height and width in pixels if you know them */
    width: 100%; }
 #calendar #calendar-content { 
    position: relative;
    z-index: 1; }
 

Answer 2

  

Je crois que la façon de contourner cela est de forcer tout à l'intérieur pour être positionné (par exemple position: relative). Et un z-index + hasLayout mais parfois il ne fonctionne pas

Position: relative ne déclenche pas hasLayout. Vous devriez essayer quelque chose de simple comme zoom:1 avec un z-index.

Je suis assez sûr (va de ma mémoire de traiter un problème similaire) qui essaie de choses de position relativement au-dessus d'un .png dans IE6 ne fonctionne pas, mais en spécifiant z-index fait.