CSS div 오버레이 인터넷 익스플로러에서 unclickable

내가 봤어 및 stackoverflow 꽤 많이 쿼리하는 있지만이 정확한 문제를 다른 곳에서는 중복 발견하지 않았습니다. 아마도 내가 잊어 버린 바보 같은 것일 것입니다.CSS div 오버레이 인터넷 익스플로러에서 unclickable

권리 또는 두 부분으로 오버레이를 사용하여 이미지의 왼쪽을 눌러 탐색을 만들기 : 내가 할 노력하고있어

. 코드는 다른 브라우저에서 원했던 것처럼 작동했으며 IE에서해볼 때까지는 행복했습니다.

여기 내 도살 된 코드가 있습니다. 나는 (아직 IE 7/9을 시도하지 않은)이 인터넷 익스플로러 8에서 나를 위해 작동하지 않습니다 사업부 등의 오른쪽 을 제거하지 않는 한 I 중 하나 :

배경 색상을 설정합니다 .navi_left에
이미지를 제거하십시오.
콘텐츠를 .navi_left에 넣으면 콘텐츠 (예 : 텍스트)를 클릭 할 수 있고, 다른 브라우저에서는 전체 div를 클릭 할 수 있습니다. 이러한 옵션 중 하나가 IE에서 .navi_left 클릭을하게됩니다

HTML이 생성 :

<div class="image_div_big" style="width:600px;"> 
<div class="top"> 
    <img src="../img/20110331-200524-1.jpg" class="image_big" width="600" height="450"> 
    <div class="navi_left" id="172" style="width:312px;height:474px;"><!--placeholder--></div> 
</div> 
</div>

CSS의 :

.image_div_big {float:left;} 
.top {position:relative;width:100%;height:100%;} 
.navi_left {cursor:pointer;cursor:hand;position:absolute;top:0px;left:0px;z-index:5;border:1px solid black;}

자바 스크립트 :

$('.navi_left').click(function(){ 
     var id = $(this).attr('id'); 
     if (id != '') { 
      window.location = '/index_temp.php?i='+id; 
     } 
    });

MY 해결책 :

내가 마지막으로 내가 아래에 제안 할 필요가 있다고 동의했다. 그러나 나는 IE 고유의 스타일을 거부, 그래서 난 그냥이로했다 :

.navi_left {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);} 
.navi_right {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}

출처

2011-03-31 Mattis

귀하의 PHP 코드는 브라우저의 동작 및이 질문과 관련이 없습니다. 대신 PHP가 생성하는 HTML과 JavaScript (브라우저가 보는)를 보여주십시오. (이상적으로는 http : // jsfiddle에서 독립적 인 테스트를 거쳐 재현 가능한 테스트 케이스를 작성하십시오.net) – Phrogz

생성 된 코드로 편집됩니다. – Mattis

"IE에서해볼 때까지는 행복했습니다."- 스티브 발머의 묘비에 새겨 져 있습니다. –

나는 similar problem을했고 결국 IE의 특정 스타일에 의존하고 바로 클릭 할 수있는 영역을 배경 색상을주고 a :

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0);

가장 좋은 해결책은 아니지만 작동합니다.

답변에 @Jared Farrish의 의견을 입력하려면; 내가 conditional comments을 사용하는 경우에만 IE를 해결하기 위해 내 HTML의 head에 다음 코드를 추가 :

<!--[if IE]> 
<link rel="stylesheet" type="text/css" media="screen" href="/styles/ie.css" /> 
<![endif]-->

출처

2011-03-31 21:16:34 jeroen

그 방법을 궁금해하시는 분들을 위해, [IE 전용 스타일 시트를 만드는 방법] (http://css-tricks.com/how-to-create-an-ie-only-stylesheet/). –

@ Jared Farrish 추가 사항을 보내 주셔서 감사합니다. – jeroen

이것은 "[조건부 주석] (http://www.quirksmode.org/css/condcom.html)"이라고도합니다. –

이미 filter/-ms-filter 배경 색상을 설정하고 0으로 불투명도를 설정하는 이전 솔루션을 사용하는 경우하지 않습니다 당신을 위해 일합니다. 대신 background-image을 2x2 투명 PNG로 설정할 수 있으며 부정적인 영향없이 기존 filter/-ms-filter을 계속 사용할 수 있습니다.

출처

2014-05-27 05:47:02 bbodenmiller

CSS div 오버레이 인터넷 익스플로러에서 unclickable

답변

관련 문제