Was ist die bevorzugte Lösung nicht-klickbare Inhalt nach Anlegen eines IE6 Filter für PNGs Fixierung?

Question

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

Ich bin das PNG zu #Kalender Anwendung in IE6 Ich Verwendung Filter, aber es macht den Inhalt nicht anklickbar - ich glaube, die Art und Weise um das war alles, was nach innen zu zwingen, zu sein positioniert (zB Position : relative) und einen z-index + hasLayout , aber manchmal funktioniert es nicht

.

Sollte ich stattdessen alle wickeln meine Sachen in einem anderen div und wenden Sie die png BG auf einen Geschwisterknoten so wie diese, oder was?

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

Danach müssen Sie den Kalender-bg absolut positioniert zu werden und 100% Breite / Höhe und relativ Position # Kalender-Inhalt oben drauf? Oder gibt es eine andere versteckte Art und Weise, dass der Mainstream-png fixen Skripte (ala htc, jquery.pngFix) Arbeit?

Answer 1

Das ist in der Tat die (nur) richtige Lösung für dieses Problem in dem ich je war. Sie können nicht auf Ihre erste Lösung verlassen (Positionierung der Childs relativ), weil die Opazität Filter im Internet Explorer über alle untergeordneten Elemente geworfen wird, wobei die untergeordneten Elemente als Ergebnis nicht anklickbar sein.

Also nur sicherstellen, dass die png ist nicht in dem übergeordneten Elemente eines klickbaren Elements.

So erstellen Sie einen Elternteil mit der Eigenschaft ‚position: relative‘. (Oder absolut, hängt von Ihrem Layout) und dem Einsatz zwei Kinder für den Hintergrund und den eigentlichen Inhalt

Beispiel:

<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

  

Ich glaube, der Weg, um dies alles nach innen zu zwingen positioniert werden (zB position: relative). Und einen z-index + hasLayout aber manchmal funktioniert es nicht

Position: nicht relativ hasLayout auslösen. Sie sollten etwas Einfaches wie zoom:1 mit einem Z-Index versuchen.

Ich bin mir ziemlich sicher (ging aus meinem Gedächtnis mit einem ähnlichen Problem des Umgangs), die auf der Spitze eines png in IE6 relativ Position Sachen versuchen, nicht funktioniert, aber die Angabe z-Index des Fall ist.