Какое предпочтительное решение для исправления некликабельного контента после применения фильтра IE6 для PNG?
-
22-09-2019 - |
Вопрос
<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)?
Решение
Это действительно (единственное) правильное решение проблемы, с которой я когда-либо сталкивался.Вы не можете полагаться на свое первое решение (относительное расположение дочерних элементов), поскольку фильтр непрозрачности в 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; }
Другие советы
Я считаю, что способ обойти это заключался в том, чтобы заставить все внутри быть позиционированным (например, Position:relative) и иметь z-index + hasLayout, но иногда это не работает.
Position:relative не запускает hasLayout.Вам следует попробовать что-то простое, например zoom:1
с z-индексом.
Я почти уверен (исходя из моей памяти о столкновении с подобной проблемой), что попытка относительно позиционировать материал поверх PNG в IE6 не работает, но указание z-index работает.