position为relative的table-cell和其postion为absolute的子元素定位的bug

考虑如下内容：

<style type="text/css">
  table { margin: 200px; }
  .td { position: relative; width: 100px; height: 100px; background-color: #f00; }
  .absolute { position: absolute; left: -20px; top: 0; }
</style>
<table>
  <tbody>
    <tr>
      <td class="td">
        <div class="absolute">这是内容</div>
      </td>
    </tr>
  </tbody>
</table>

本该好好的按下面的显示：

可是，在firefox30版本一下( chrome,ie8910，opera38.0正常，貌似就ff有这个痛 )，就是下面的样子了：

为啥这样子呢？

移步 w3c

relative

The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

可以看出，table-cell属性的元素其relative属性无效。

解决方案呢？

可以在td里面或者table-cell元素的内部插入一个div，然后将其设置为postion relative，不要直接在cell类的元素中直接设置position relative。
具体方法可参考这个博文里的内容：table-cell-position-absolute

参考火狐开发者社区:

[1] 从 Firefox 30 起，Gecko 允许 ,,元素使用 position: relative; 样式以作为绝对定位元素的容器。因此在表格内的 position:absolute元素同样可相对于这些元素定位。在其它浏览器与旧版本 Firefox 中，对表格行或一组行设置 position: relative是无效的。Firefox 通过在 JS 控制台输出对添加相对定位的表格行或行组元素的如下警告信息，来帮助开发者转移到新的样式行为上，并检测可能存在的渲染问题：

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

火狐是支持tr这类标签的relative，不过测试了下chrome貌似不支持。

完。