Qual è la soluzione preferita per fissare i contenuti non cliccabile dopo l'applicazione di un filtro per IE6 PNG?

Question

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

sto applicando il PNG a #calendar, in IE6 uso del filtro ma rende il contenuto non cliccabile - Credo che il modo per aggirare questo è stato quello di costringere tutto dentro per essere (ad esempio la posizione posizionato :. relativa) e hanno un indice z + hasLayout ma a volte non funziona

Devo invece avvolgere tutta la mia roba in un altro div e applicare il png BG ad un nodo di pari livello come come questo, o cosa?

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

Poi forzare il calendario-bg per essere posizionato in modo assoluto e 100% larghezza / altezza, e relativamente la posizione # calendar-contenuti su di esso? O c'è qualche altro modo nascosto che gli script fissatore mainstream png (ALA htc, jquery.pngFix) funzionano?

Answer 1

Questa è infatti la (unica) soluzione corretta a questo problema che io abbia mai incontrato. Non si può contare sulla vostra prima soluzione (posizionamento dei bambino relativamente), perché il filtro di opacità in IE è gettato su tutti gli elementi figlio, con gli elementi figlio non essendo cliccabile di conseguenza.

Quindi, solo assicurarsi che il png non è l'elemento principale di un elemento cliccabile.

Quindi, creare un genitore con la proprietà 'position: relative'. (O assoluto, dipende dal vostro layout) e inserire due figli per lo sfondo e il contenuto effettivo

Esempio:

<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

  

Credo che il modo per aggirare questo era di forzare tutto dentro da posizionare (es position: relative). E hanno un indice z + hasLayout ma a volte non funziona

position: relative non si innesca hasLayout. Si dovrebbe provare qualcosa di semplice come zoom:1 con un z-index.

Sono abbastanza sicuro (che va dalla mia memoria di affrontare un problema simile) che cercare di roba relativamente posizione in cima ad una png in IE6 non funziona, ma specificando z-index fa.