IE8에서 오버레이를 클릭 할 수 없음

Question

내 오버레이를 클릭하는 모든 브라우저 (예 : Firefox, Chrome, IE9)에서 내 onClick 기능이 실행됩니다. 그러나 IE8에서는 마치 클릭 할 수없는 방식으로 상자가 존재하지 않는 것처럼 보이며 그 뒤에 내용이 있습니다. 여기 내 코드는 다음과 같습니다

HTML :

<div id="pageblock" onclick="closelogin()"></div> 
<div id="loginbox"><!--This is where my form is--></div> 

CSS :

#loginbox{ 
     z-index: 10; 
     position: absolute; 
     height: 83px; 
     top: 105px; 
     right: 20px; 
     width: 400px 
     overflow: hidden; 
     padding: 5px; 
    } 
    #pageblock{ 
     display: none; 
     position: fixed; 
     z-index: 7; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: #000; 
     opacity: 0.6; 
    height: 100%; 
    width: 100%; 
    } 

IE8 및 이전 CSS :

#pageblock{ 
    background: transparent !important; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)"; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); 
} 

감사합니다!

Answer 1

오류는 이미 확인했듯이 -ms-filter의 사용으로 발생합니다. 필터를 적용하면 브라우저가 폭과 높이를 계산하는 방식이 변경되므로 클릭 가능한 영역이 전체 div 자체가 아닌 페이지 블록 div 내의 텍스트로 축소됩니다.

가장 간단한 해결책은 배경 이미지를 사용하는 것입니다. 작은 5px x 5px 60 % 투명 검정색 .png는 정상적으로 작동하고 전반적인 페이지 크기에 최소한의 공간을 추가하며 IE7 이상에서 브라우저를 지원하며 페이지 블록에 대해 설정 한 너비/높이 선언을 덮어 쓰지 않습니다.

내가 게시 한 코드에는 여러 가지 다른 문제가 있습니다. 적용한 z- 색인은 로그인 상자가 페이지 블록 상단에 나타남을 의미합니다 (의도적입니까?). 또한 loginbox가 페이지 오른쪽에서 20px로 표시되도록 지정했지만 너비는 100 %로 지정했습니다. 총 너비 100 % + 20px로 계산되며 이는 페이지에 표시되는 것보다 넓습니다. 측정 단위를 혼합해서 사용하지 마십시오. 올바른 위치를 백분율 기준으로 만들고 너비 선언에서 공제하거나 loginbox의 with를 픽셀 단위로 지정하십시오. 장기적으로 많은 두통을 덜어 줄 것입니다.