2008-04-12
IE又一个让人吐血的BUG: 关于 table的position 和 select
在IE内( 6 7 都一样) 运行下面代码 ,代码可以从附件里下载
(大家可以看一下 dom结构多么的简单啊
)
运行以上代码
=============================================
点击 show/hide 按钮后,
div ccc 被隐藏, 里面的内容也被隐藏, 但是table 却还显示(里面的td也已经隐藏了)
解决办法一:
把是 table样式里的 "position: relative;"去掉 (positiond 等于 absolute 也不行)
解决方法二:
改那个 tbox的div 也加上 "position: relative;"
★ 以上两种解决方案 还是有一点逻辑性,最多可以归结为 IE在处理 table的position时有bug.
但是下面两个方案绝对让你吐血
解决方法三:
把那个 select 去掉,这个问题也不会出现
解决方法四:
把那个 select 放到table后面,这个问题也不会出现
=============================================
IE啊, 你可以让table不支持 position: relative;
但是为什么一定要在 table的前面有select的时候才不支持呢
IE 你太诡异了 (IE 6 和 7 都是一样的诡异)
我彻底被你打败了
=============================================
(大家可以看一下 dom结构多么的简单啊
)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>IE BUG ---- table position & select </title>
<script>
function showDiv(){
var tbox=document.getElementById("tbox");
tbox.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;"
★ 以上两种解决方案 还是有一点逻辑性,最多可以归结为 IE在处理 table的position时有bug.
但是下面两个方案绝对让你吐血
解决方法三:
把那个 select 去掉,这个问题也不会出现
解决方法四:
把那个 select 放到table后面,这个问题也不会出现
=============================================
IE啊, 你可以让table不支持 position: relative;
但是为什么一定要在 table的前面有select的时候才不支持呢
IE 你太诡异了 (IE 6 和 7 都是一样的诡异)
我彻底被你打败了
=============================================
评论
晕，这根本都不是Bug
看看这个
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间
你的说法完全错误的 呵呵
这个不是 relative 定位的问题, 而是 relative 的对象无法被隐藏的问题.
你看哪里说过 position等于relative 的对象无法被隐藏了?
而且其他浏览器都没有这个问题 这是IE的bug, 毫无疑问的
你可能没明白我帖子里写的东西的意义
建议你下载下来试一试
再把 select 换成 别的东西试一试
你会发现, 确实是 IE在处理select时的bug
我接触ajax 这些东西也有几年的历史了,虽然不敢妄称高手,但是relative 的意义还是明白的 呵呵
另外: hax可是这个领域内国内的顶级专家了 他的话还是要相信的 哈哈
看看这个
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间