не кликаемые ссылки и кнопки в 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;
    }