Firefox下table单元格td设计relative定位失效解决方案-（FF下油表图片跑到左上角）

Firefox下table单元格td设计relative定位失效解决方案

问题描述：

默认情况下，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等都可以

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td class="cell"><div class="sub">第二行第一个单元格内的容器</div></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

默认情况下，IE中td的position:relative是有效的;<br />

在FF中td的position:relative是无效的<br />

要在FF中使table的position:relative有效，需要同时设置display:block，而IE不用同时设置display:block

另一个解决法：

不要给td加入定位，将td里面的内容加一个div，然后把div定位即可，我觉得这样还好一些，不会引起兼容问题。

posted @ 2014-04-17 17:38  photoshop爱好者  阅读(256)  评论(0)    收藏  举报