Какое предпочтительное решение для исправления некликабельного контента после применения фильтра IE6 для PNG?

Question

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

Я применяю PNG к #calendar, в IE6 я использую фильтр, но из-за него контент становится недоступным для кликов. Я считаю, что способ обойти эту проблему заключался в том, чтобы заставить все внутри быть расположен (например, позиция: относительное) и иметь z-индекс + имеетLayout но иногда это не работает.

Должен ли я вместо этого обернуть все свои вещи в другой div и применить png BG к родственному узлу, например этому, или что?

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

Затем заставить календарь-bg быть абсолютно позиционированным и иметь 100% ширину/высоту и относительно расположить #calendar-content поверх него?Или есть какой-то другой скрытый способ работы основных сценариев исправления png (аля htc, jquery.pngFix)?

Answer 1

Это действительно (единственное) правильное решение проблемы, с которой я когда-либо сталкивался.Вы не можете полагаться на свое первое решение (относительное расположение дочерних элементов), поскольку фильтр непрозрачности в IE применяется ко всем дочерним элементам, в результате чего дочерние элементы становятся недоступными для кликов.

Поэтому просто убедитесь, что png не находится в родительском элементе кликабельного элемента.

Итак, создайте родителя со свойством «позиция:относительный» (или абсолютный, зависит от вашего макета) и вставьте двух дочерних элементов для фона и фактического содержимого.

Пример:

<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

Я считаю, что способ обойти это заключался в том, чтобы заставить все внутри быть позиционированным (например, Position:relative) и иметь z-index + hasLayout, но иногда это не работает.

Position:relative не запускает hasLayout.Вам следует попробовать что-то простое, например zoom:1 с z-индексом.

Я почти уверен (исходя из моей памяти о столкновении с подобной проблемой), что попытка относительно позиционировать материал поверх PNG в IE6 не работает, но указание z-index работает.