Может ли td быть относительно позиционированным предком абсолютно позиционированного элемента?

Question

У меня есть изображение, которое я хочу перейти к другому изображению. Это единственный дочерний элемент содержащего td элемента.

Итак, сначала я задаю стиль с помощью .css('position', 'relative')

Затем создайте второе изображение и присвойте ему некоторые свойства:

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, содержащего table, вместо того, чтобы идеально наложить существующее изображение в td. Это правильное поведение? Разве td не является действительным относительно позиционированным предком, потому что это не блочный элемент или что-то в этом роде?

Приветствуются предложения о лучших способах превращения одного изображения в другое.

Update

Я переключился на обычное встроенное изображение, но добавил отрицательное верхнее поле, равное его собственной высоте (поскольку изображение полностью заполняет ячейку, оно отображается под изображением, которое я хочу заменить). Это работало прекрасно и не требовало абсолютного позиционирования.

Answer 1

Итак, сначала я задаю стиль с помощью .css('position', 'relative')

Извлечение WC3 CSS 2.1 Спецификация: Модель визуального форматирования: свойство 'position' :

Эффект «позиция: относительный» на таблицу-строку-группу, группа заголовка таблицы, группа нижнего колонтитула таблицы, строка таблицы, группа столбцов таблицы, столбец таблицы, ячейка таблицы и элементы заголовка таблицы не определены.

Обычный обходной путь - обернуть div с position:relative вокруг всего, что внутри td.

Вы уверены, что для этого нужно использовать таблицы?