IE又一个让人吐血的BUG: 关于 table的position 和 select

最新推荐文章于 2022-04-28 17:07:05 发布

fins

最新推荐文章于 2022-04-28 17:07:05 发布

阅读量394

点赞数

分类专栏： web前端文章标签： IE Ajax 浏览器 HTML

web前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

在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 都是一样的诡异)
我彻底被你打败了
=============================================

fins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE又一个让人吐血的BUG: 关于 table的position 和 select

在IE内( 6 7 都一样) 运行下面代码 ,代码可以从附件里下载(大家可以看一下 dom结构多么的简单啊 :( )[code="html"] IE BUG ---- table position & select function showDiv(){ var tbox=document.getElementById("tbox"); ...
复制链接

扫一扫