chrome 和 safari 中无法点击的链接和按钮

Question

由于它们具有相同的渲染引擎，因此两者都会出现此问题。它在 IE7/8/9、FF 中运行良好。我正在使用 chrome 17 和 safari 5。这是我的整个代码。请注意，您不能同时单击按钮和链接。（您必须单击 img 才能显示元素）

<script type="text/javascript">
 function showDrop(){
 document.getElementById('droplist').style.display="block";
}
function hideDrop(){

 document.getElementById('droplist').style.display="none";

}
</script>

 <style>
body{
direction:rtl;
 }
#droplistImg{
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    border-top:1px solid #000000;
    padding:3px;
    background:#c0c0c0;
    float:right;

}
#droplistinfo{
border:1px solid #000000;
position:absolute;
z-index:-1;
left: 0;
top:20px;
background:#c0c0c0;

}

 #droplist{
width: 101px;
position: relative;
}

</style>

 <div id="droplist" style="position:absolute;display:none;">
 <div id="droplistImg" ><img src="images/stats.png"/></div>

<div id="droplistinfo">
    <input type="button" value="phone num"/>
    <input type="button" value="fax num"/>
    <a style="float:left;" href="javascript:hideDrop()">close</a>
</div>

 </div>
 <img src="images/stats.png" onclick="showDrop()"/>

Answer 1

我知道出了什么问题。当我删除它时，它是 z-index ，它工作正常。我改变了一些东西，现在效果很好。

    body{
        direction:rtl;
    }

    #droplistImg{
            border-left:1px solid #000000;
            border-right:1px solid #000000;
            border-top:1px solid #000000;
            padding:3px;
            background:#c0c0c0;
            float:right;
            position:absolute;
             z-index:2;
    }
    #droplistinfo{
        border:1px solid #000000;
        position:absolute;

        left: 0;
        top:20px;
        background:#c0c0c0;

    }

    #droplist{
        width: 101px;
        position: relative;
    }