IE 10中的按钮上的透明叠加div触发器不起作用

Question

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