按钮上的透明覆盖div触发器不起作用在IE 10中

Question

我试图清理我的CSS和JavaScript，我走得太远了。虽然这段代码适用于Chrome浏览器和Firefox，但在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）;创建一个不可见的透明叠加触发器。 检查上面的小提琴。