투명 오버레이 div 버튼이 IE 10에서 작동하지 않습니다.

Question

내 CSS와 자바 스크립트를 정리하려고했는데 너무 멀리갔습니다. 이 코드는 크롬 사파리와 파이어 폭스에서 작동하지만 IE10에서는 문제가 없습니다. http://jsfiddle.net/alexnode/y4y4A/1/

<div id="bgmbutton1"> 
     <img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games"> 
     <img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games"> 
     <div id="otrigger1" class="button" data-case="translation"></div> 
    </div> 

#bgmbutton1 { 
    position: fixed; 
    left: 2%; 
    top: 5%; 
} 
#button1 { 
    width: 25%; 
} 
#obutton1 { 
    width: 25%; 
    position: absolute; 
    top:0; 
    left:0; 
} 
#otrigger1 { 
    height:100%; 
    width:100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    cursor: pointer; 
    z-index:5000; 
} 

어떤 아이디어가? 나는 아주 기본적인 무언가를 잘못하고 있다고 확신한다.

Answer 1

http://jsfiddle.net/alexnode/y4y4A/8/

#bgmbutton1{position: fixed; 
    left: 2%; 
    top: 5%; 
    } 
#button1 {width: 25%;} 
#obutton1 {width: 25%;position: absolute;top:0;left:0;} 
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;} 

당신은 배경을 추가해야합니다 : RGBA (0,0,0,0)를; 보이지 않는 투명한 오버레이 트리거를 만듭니다. 위의 바이올린을 확인하십시오.