Table单元格td的position:relative的兼容性

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

原创最新推荐文章于 2022-04-28 17:07:05 发布 · 707 阅读

0 ·

CC 4.0 BY-SA版权

web开发同时被 2 个专栏收录

28 篇文章

订阅专栏

语言工具

15 篇文章

订阅专栏

本文探讨了在IE和FF浏览器中，表格单元格内使用position属性进行元素定位时的兼容性问题。指出在FF中position:relative需要与display:block/inline-block同时使用才有效，而在IE中则可以与多种display属性配合使用。

( 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，都不起作用的。