CSS:在相对容器内使用绝对元素

Question

在“相对”容器内使用“绝对”元素时出现 FF 问题

<table>
  <tr>
    <td style="position:relative; height:40px; width:80px">
      <img style="position:absolute; top:0px; left:0px" src="pic.jpg" />TITLE
    </td>
  </tr>
</table>

我在这里想要实现的是将图像定位在单元格的左上角。因此，我将 img 标签设置为“position:absolute”，将 td 标签设置为“position:relative”。这在 IE 中运行良好，但在 FF 和 Chrome 中却不行。该图像出现在我文档的左上角。似乎单元格容器的“相对”属性被忽略了。

知道我在使用这些样式时做错了什么吗？

Answer 1

我也遇到过这个问题。除了将我想要 position: absolute 的 td 内容包装在具有 的元素 (div) 之外，我找不到其他方法position:relative。

不幸的是，这不是一个很好的答案。我很想知道造成这种情况的确切原因，但我猜这是由于表格元素的特殊显示类型所致。