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将替换图像发送到包含div的{{1}}的左上角，而不是完全覆盖table中的现有图像1}}。这是正确的行为吗？ td是不是一个有效的相对位置的祖先，因为它不是块元素或类似的东西吗？

建议让更好的方法让一个图像淡入另一个图像，这是值得欢迎的。

更新

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

Answer 1

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

结帐WC3 CSS 2.1 Specification : Visual formatting model : 'position' property：

'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column， table-cell 和表标题元素未定义。

常见的解决方法是在div内的所有内容周围position:relative包含td。

你确定你需要使用表吗？

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

1 个答案: