0

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

有任何想法吗?我确定我做错了什么,这是非常基本的。

4

1 回答 1

3

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

于 2013-06-22T17:03:35.070 回答