Question

在“relative”容器

中使用“absolute”元素时遇到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

我之前也遇到过这个问题。除了将我想要的td内容position: absolute包含在div的元素（position: relative）中之外，我从未找到过其他方法。

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

Answer 2

我想通过在td元素中使用div来解决它。

所以新结构将是：

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

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

2 个答案: