( From: http://www.itref.cn/a/css/2010/0706/70.html)
问题描述：
默认情况下，table的单元格td的display为table-cell，在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF下却不可以。但是在IE下，position:absolute的容器的z-index总是比td的z-index低，td层总是在position:absolute的容器的上面
发生条件：
1. IE6、IE7、IE8和FF浏览器
2. 使用td默认样式，设置td的position:relateve，再给td内的容器设置position:absolute定位
原因分析：
1. 在FF中position:relative要与display:block/inline-block才能生效，display:block/inline-block可以是默认块元素，或是被定义的元素。
2. 而在IE中position:relative除了与display:block/inline-block可以生效外，与display:table-cell、table等都可以
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Table单元格内容器定位的兼容性</title>
<style type="text/css">
*{margin:0;padding:0;}
.tb{display:block;width:304px;margin:0 auto;border-collapse:collapse;position:relative;}
.tb td{width:150px;border:1px solid #DDD;position:relative;}
.sub{background-color:#FF0000;width:150px;padding:3px;border:1px solid #FF6600;position:absolute;z-index:9999;left:152px;top:0;}
</style>
</head>
<body>
<h1>可以在IE和FF下看到区别</h1>
<table class="tb">
<tbody>
<tr>
<td rowspan="2"> <wbr></td>
<td> <wbr></td>
</tr>
<tr>
<td> <wbr></td>
</tr>
<tr>
<td class="cell"> <wbr><div class="sub">第二行第一个单元格内的容器</div></td>
<td> <wbr></td>
</tr>
</tbody>
</table>
默认情况下，IE中td的position:relative是有效的;<br />
在FF中td的position:relative是无效的<br />
要在FF中使table的position:relative有效，需要同时设置display:block，而IE不用同时设置display:block
</body>
</html>
新浪网友2011-04-28 11:01:50[回复] [删除] [举报]
我在机器上试了 你这个说的不对，w3c没有对table元素的position：relative进行定义，不管table-cell内部绝对定位的元素是block/ inline-block /inline，都不起作用的。
分享到：
相关推荐
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan 【table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan】
JSP Table 单元格合并 javascript
适合layui-table单元格编辑自定义表单类型、时间控件、数字框、下拉选、单选等各种表单控件
bootstrap-table拖拽表格改变列宽，兼容主流浏览器，兼容body与header对齐
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
layui table合并单元格.zip 跨行自动合并单元格
vue-easytable合并单元格，文档包括ftl文件及对应的js
SWT Table 单元格编辑实例代码
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
事件中的 this相当于document.getElementById(“id”) 替代方法就是将原本 document.getElementById("id").InnerHTML = "填充代码"; 替换成 $("#id").html("填充代码"); <!DOCTYPE html> ...meta
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
代码重点是hash_table，附加std::map与其做对比，实现的是一条sql语句：select c_nationkey, c_mktsegment, count(*), max(c_acctbal) from aaa_customer_1g group by c_nationkey, c_mktsegment order by c_...
LayUiTable表单相同参数的单元格合并，可以几个列一起合并，注释相应完善。LayUiTable表单相同参数的单元格合并
本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下： 表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: ...
JSP中table的td标签迭代循环，控制循环的行数，换行
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
<td width=1 bgcolor=#7C7C7C><div style="position:relative"> <div style="position:absolute;top:10px"> <table width=95 border=0 cellpadding=0 cellspacing=0> <td width="19" height="0"><div style="...