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

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

1 голос
/ 25 февраля 2010 
<div id="calendar">
  <p>Text</p>
  <div class="section">blah</div>
</div>

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

Должен ли я вместо этого обернуть все свои вещи в другой 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>

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

Ответы [ 2 ]

1 голос
/ 26 февраля 2010

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

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

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

Пример: 

<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; }
0 голосов
/ 25 февраля 2010

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

Позиция: родственник не вызывает hasLayout. Вы должны попробовать что-то простое, например zoom:1 с z-индексом.

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

...