png에 IE6 필터를 적용한 후 클릭 할 수없는 콘텐츠를 수정하는 가장 좋은 해결책은 무엇입니까?

Question

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

내가 IE6에서 PNG가 #calendar을 적용하고있어 나는 필터를 사용하지만 내용이 없습니다 클릭합니다 - (예 : 위치 : 상대를) 나는이 주변의 방법은 가 위치로 내부의 모든 것을 강제하는 것이었다 생각 Z- 색인 + 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가 클릭 가능한 요소의 부모 요소에 없는지 확인하십시오.

그래서 '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- 인덱스 + hasLayout을 가졌지 만 때때로 작동하지 않는 것으로 생각합니다.

위치 : 상대적으로 hasLayout이 트리거되지 않습니다. Z- 색인이있는 zoom:1과 같은 간단한 것을 시도해야합니다.

IE6에서 PNG 상단에 물건을 상대적으로 위치 시키려고하면 z- 인덱스를 지정하는 것이 좋습니다 (비슷한 문제를 다루는 내 기억으로가는 것).