Qual é a solução preferida para corrigir conteúdo não clicável após aplicar um filtro IE6 para pngs?

Question

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

Estou aplicando o PNG no #calendar, no IE6 eu uso filtro mas ele faz com que o conteúdo não seja clicável - acredito que a forma de contornar isso foi forçar tudo dentro a ficar posicionado (por exemplo, position:relative ) e tem um índice z + temLayout mas às vezes não funciona.

Em vez disso, devo agrupar todas as minhas coisas em outro div e aplicar o png BG a um nó irmão como este, ou o quê?

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

Em seguida, forçar o calendário-bg a estar absolutamente posicionado e com 100% de largura/altura, e posicionar relativamente #calendar-content em cima dele?Ou existe alguma outra maneira oculta de os principais scripts de correção de png (ala htc, jquery.pngFix) funcionarem?

Answer 1

Essa é de fato a (única) solução correta para esse problema que já encontrei.Você não pode confiar na sua primeira solução (posicionando os filhos relativamente), porque o filtro de opacidade no IE é lançado sobre todos os elementos filhos, e como resultado os elementos filhos não são clicáveis.

Portanto, certifique-se de que png não esteja no elemento pai de um elemento clicável.

Então, crie um pai com a propriedade 'posição:relativo' (ou absoluto, depende do seu layout) e insira dois filhos para o plano de fundo e o conteúdo real.

Exemplo:

<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

Acredito que a maneira como isso era forçar tudo a serem posicionadas (por exemplo, posição: relativa) e ter um Z-Index + Haslayout, mas às vezes não funciona.

Posição: O parente não aciona o HasLayout. Você deve tentar algo simples como zoom:1 com um z-índice.

Tenho certeza (indo da minha memória de lidar com um problema semelhante) que tentar posicionar relativamente as coisas no topo de um PNG no IE6 não funciona, mas especificar o Z-Index.