Qual è la soluzione preferita per fissare i contenuti non cliccabile dopo l'applicazione di un filtro per IE6 PNG?
-
22-09-2019 - |
Domanda
<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?
Soluzione
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; }
Altri suggerimenti
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.