代码如下:
复制代码 代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>IE BUG - table position & select div的显示隐藏_www.jb200.com</title>
<script>
function showDiv(){
var tbox=document.getElementById("tbox");
tboxtbox.style.display = tbox.style.display=="none"?"":"none";
}
</script>
<style>
.badtable {
width: 200px;
height:100px;
background-color: #f0f0f0;
position: relative;
}
</style>
</head>
<body>
<input onclick="showDiv()" type="button" value="show/hide" /> <br/>
<div id="tbox" >
<select>
<option>我是一个select</option>
</select>
<table class="badtable" border="1" >
<tr>
<td >表格内容1</td>
</tr>
</table>
</div>
其他内容1<br/>
其他内容2<br/>
其他内容3<br/>
其他内容4<br/>
</body>
</html>
点击 show/hide 按钮后,
div ccc 被隐藏, 里面的内容也被隐藏, 但是table 却还显示(里面的td也已经隐藏了)
解决办法一:
把是 table样式里的 "position: relative;"去掉 (positiond 等于 absolute 也不行)
解决方法二:
改那个 tbox的div 也加上 "position: relative;"
解决方法三:
把那个 select 去掉,这个问题也不会出现
解决方法四:
把那个 select 放到table后面,这个问题也不会出现。