Question

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

我正在将PNG应用于#calendar，在IE6中我使用过滤器但它使内容无法点击 - 我相信这样做的方法是强制内部的所有内容定位（例如位置：相对）并且有一个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修复脚本（ala htc，jquery.pngFix）是否有其他隐藏方式？

Answer 1

这确实是我遇到的这个问题的唯一正确解决方案。您不能依赖第一个解决方案（相对定位子项），因为IE中的不透明度过滤器会抛出所有子元素，因此子元素不可单击。

因此，请确保png不在可点击元素的父元素中。

因此，使用属性“position：relative”（或绝对值，取决于您的布局）创建父级，并为背景和实际内容插入两个子级。

示例：

<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

我认为解决这个问题的方法是强制将所有内部定位（例如位置：相对）并使用z-index + hasLayout但有时它不起作用。

位置：相对不触发hasLayout。您应该尝试使用带有z-index的zoom:1之类的简单内容。

我非常肯定（从我处理类似问题的记忆中）试图在IE6中的png之上相对定位东西不起作用，但指定z-index会起作用。

在为png应用IE6过滤器后修复不可点击内容的首选解决方案是什么？

2 个答案: