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;
    }

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

1 个答案: