¿Cuál es la solución preferida para la fijación de contenido no se puede hacer clic después de aplicar un filtro para IE6 PNG?

Question

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

Estoy aplicando el PNG a #calendar, en el uso de filtro IE6 pero hace que el contenido no se puede hacer clic - Creo que la forma de evitar esto era obligar a todo el interior para ser posicionado (por ejemplo, posición : relativa) y tienen un índice z + hasLayout pero a veces no funciona

.

¿Debo lugar envolver todas mis cosas en otro div y aplicar la BG png a un nodo del mismo, tales como esta, o qué?

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

A continuación, forzar el calendario-bg para ser posicionado absolutamente y 100% anchura / altura, y relativamente posición # calendar-contenido en la parte superior de ella? ¿O hay alguna otra manera oculta que las secuencias de comandos que necesita reparaciones corriente png (al estilo de HTC, jquery.pngFix) trabajo?

Answer 1

Esto es de hecho la (única) solución correcta a este problema que he encontré. No se puede confiar en su primera solución (el posicionamiento de los niño relativamente), debido a que el filtro de opacidad en el IE es lanzada sobre todos los elementos secundarios, con los elementos secundarios no ser puede hacer clic como resultado.

Así que asegúrese de que el PNG no está en el elemento principal de un elemento puede hacer clic.

Por lo tanto, crear una matriz con la propiedad 'position: relative'. (O absoluta, depende de su diseño) y la inserción de dos hijos para el fondo y el contenido real

Ejemplo:

<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

  

I creer que la forma de evitar esto era forzar a todo el interior para ser colocado (por ejemplo, posición: relativa). Y tienen un índice z + hasLayout pero a veces no funciona

Posición: relativa no activa hasLayout. Usted debe tratar de algo tan simple como zoom:1 con un índice z.

estoy bastante seguro (que va de mi memoria de tratar con un problema similar) que intentar relativamente posición de cosas en la parte superior de un PNG en IE6 no funciona, pero la especificación de índice z hace.