td 可以是绝对定位元素的相对定位祖先吗？

Question

我有一张图片想要转换为另一张图片。它是包含td 元素的唯一子元素。

所以我首先使用.css('position', 'relative') 设置td 样式

然后创建第二个图像并赋予它一些属性：

var img = $('<image src="a.png" />')
   .css({
      position: 'absolute',
      top: 0,
      left: 0,
      opacity: 0,
      'z-index': 1
   })
   .appendTo($td) ;

最后我为旧图像和新图像制作动画：

img.fadeIn(1000);
oldimg.fadeOut(1000);

在动画结束时，我可以删除旧图像并重置所有 css 属性。

现在，这一切在 IE7 中运行良好，但 FireFox 5 将替换图像发送到包含table 的div 的左上角，而不是完美地覆盖td 中的现有图像。这是正确的行为吗？ td 不是有效的相对定位的祖先，因为它不是块元素或类似的东西吗？

欢迎提出更好的方法让一张图像淡入另一张图像。

更新

我像往常一样切换到内联图像，但添加了一个负的上边距，等于它自己的高度（由于图像完全填满了单元格，它显示在我要替换的图像下方）。这很好用，不需要绝对定位。

Answer 1

所以我首先使用.css('position', 'relative') 设置td 样式

查看WC3 CSS 2.1 Specification : Visual formatting model : 'position' property:

'position:relative' 对 table-row-group 的影响， 表头组、表尾组、表行、表列组、 table-column、table-cell 和 table-caption 元素未定义。

一种常见的解决方法是用position:relative 将div 包裹在td 内的所有内容周围。

您确定需要为此使用表格吗？