什么是固定的应用过滤器IE6的PNG图像后不可点击的内容的首选解决方案？

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>

然后迫使日历-BG被绝对定位，100％的宽度/高度，并在它的上面相对位置＃日历内容？或者是有一些其他的隐藏方式，主流PNG定影液脚本（ALA 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

  

相信解决此的方式是迫使一切内部被定位（例如，位置：相对）。并且具有的z-index + hasLayout的但有时不工作

位置：相对于不触发hasLayout的。你应该尝试一些简单的像与z-index的zoom:1。

我敢肯定（从我处理类似问题的内存会），试图在IE6 PNG格式的顶部相对位置的东西是不行的，但指定的z-index一样。