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

【问题标题】：Transparent overlay div trigger on a button doesn't work in IE 10按钮上的透明覆盖 div 触发器在 IE 10 中不起作用
【发布时间】：2013-06-23 01:04:48
【问题描述】：

我试图清理我的 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;
}

有什么想法吗？我确定我做错了什么，这是非常基本的。

【问题讨论】：

标签： jquery css html internet-explorer-10 incompatibility

【解决方案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);创建一个不可见的透明覆盖触发器。检查上面的小提琴。

【讨论】：