Chrome和Safari浏览器中的不可点击链接和按钮

Question

由于它们具有相同的渲染引擎，因此这两个问题都会同时出现。 它在IE7 / 8/9，FF中效果很好。 我正在使用chrome 17和safari5。这是我的整个代码。 看到您无法同时单击按钮和链接。（您必须单击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;
    }