关于img z-index问题 在IE下 img总是先被点中(其它浏览器都有效)
0
[待解决问题]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
#test{width:500px; height:500px; border:1px solid #ccc; }
#test_1{width:400px; height:400px; border:1px solid #ccc; }
#test_1_1{width:100px; height:100px; border:1px solid #FF0000; cursor:pointer; position:absolute; left:10px; top:10px; z-index:1000}
#test_1_2{width:300px; height:100px; border:1px solid #FFFF00; cursor:pointer; position:absolute; left:150px; top:10px; z-index:1000}
#test_1_3{width:100px; height:100px; border:1px solid #98FB98; cursor:pointer; position:absolute;left:50px; top:200px; z-index:1000}
#tp{width:400px; height:400px; border:5px solid #9400D3; position:absolute; z-index: -1; left:0; top:0;}
</style>
<script type="text/javascript">
window.onload = function(){
var otest_1_1 = document.getElementById("test_1_1");
var otest_1_2 = document.getElementById("test_1_2");
var otest_1_3 = document.getElementById("test_1_3");
var otp = document.getElementById("tp");
otest_1_1.onclick = function(){
alert('test_1_1点击中了');
};
otest_1_2.onclick = function() {
alert('test_1_2点击中了');
};
otest_1_3.onclick = function(){
alert('test_1_3点击中了');
}
otp.onclick = function(){
alert('test img');
}
}
</script>
</head>
<body>
<div>
<div id="test">
<div id="test_1">
<img id="tp" src="http://localhost/qpdesign/AttachFiles/ImagesLibrary/ToteBag/front/FP_037645/Category/1.png" />
<div id="test_1_1">
</div>
<div id="test_1_2">
</div>
<div id="test_1_3">
</div>
</div>
</div>
</div>
</body>
</html>
所有回答(1)
0
IE下的BUG，加一个背景图片就行了，背景图片存不存在都没关系。
