因爲它們具有相同的渲染引擎，所以在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; 
    }