Абсолютная позиция Firefox в относительной проблеме контейнера

Я использую таблицу для отображения моих динамически сгенерированных данных, зависит от ввода пользователя. Структура html выглядит следующим образом:

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> //like this i set for all td in table
     <div style="position:absolute">//like this i set for all div in table
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>

Здесь div находится в верхнем углу body.all эти выше стили применяются javascript и его рабочий тон в Chrome, IE, но не в FF, как изображение ниже.

если мы изменим положение div на абсолютное на относительное, оно будет правильно выравниваться, но я создаю эффект зависания, пока пользователь наведет div на то, что позиции важны, и эта проблема возникает только в firefox

для вашей очень быстрой ссылки проверьте jquery http://www.malsup.com/jquery/hoverpulse/

Мне нужно, чтобы это было реализовано внутри таблицы в FIREFOX, что означает

Каждое изображение, помещенное внутри td //<td style="position:relative;">
, если пользователь наводится на td, изображение должно пульсировать (эффект масштабирования).
Когда пользователь зависает, он должен перейти в предыдущее состояние. (нормальный размер)

Структура таблицы уже приведена выше.

Ответ 1

Позиционирование ячеек таблицы проблематично. Обычное решение состоит в том, чтобы оставить стиль только td и поместить в него div, который вы делаете position:relative. Затем поместите содержимое внутри этого div.

<td> <!-- no style at all -->
 <div style="position:relative;">
  <div style="position:absolute"> <!-- original div -->
   <contents>
  </div>
 </div>
</td>

Edit:
Я не знаю, какой эффект вы после, но здесь jsFiddle демонстрирует проблему: http://jsfiddle.net/ygP7k/5/
Он имеет таблицу с маленькими абсолютно расположенными div в каждой ячейке таблицы, которые должны совпадать с нижними правыми углами. Он работает во всех браузерах, кроме Mozilla.

Но вот обновленный с дополнительными divs, как я упоминал: http://jsfiddle.net/ygP7k/7/
Это работает точно так же, за исключением того, что он также выполняет трюк в Firefox.

Вы можете работать с этим? Отвечает ли это на ваш вопрос?

Ответ 2

Я просмотрел плагин hoverplus jQuery, а исходный файл показывает используемый метод:

// parent must be relatively positioned
this.parent().css({ position: 'relative' });

// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });

Из-за этих требований к плагину и ваших текущих потребностей в дизайне я рекомендую использовать .transit() плагин jQuery, который имеет мощные и простые в использовании функции масштабирования без таких требований.

Я подготовил два Таблица Примеры, каждый с 9 Div и, как вы можете видеть по разметке, это не может быть проще!

jsFiddle DEMO масштабированного Div с изображениями в таблицах

После того, как вы посмотрели на jsFiddle, который я сделал для вас, вы можете увидеть все функции плагина .transit() на демонстрационной странице ЗДЕСЬ.

EDIT: jsFiddle теперь потребовал стиль CSS для тега td position:relative за ваше обновление.

Ответ 3

вам нужно добавить 2 div в таблицу 1 с position:relative и вторым с position:absolute

<td>
<div style="position:relative">
<div style="position:absolute">ddd</div>
</div>
</td>

ваша проблема будет решена check fiddle

http://jsfiddle.net/rizwanabbasi/2hyE8/1/

Ответ 4

Я решил проблему с добавлением display: block;

.table td div {
  position:absolute;
  display:block;
}

в вашем случае:

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> <!-- like this i set for all td in table -->
     <div style="position:absolute; display:block"> <!-- like this i set for all div in table -->
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>

Ответ 5

У меня была аналогичная проблема. Я завернул проблематичный абсолютный div в абсолютном div, который исправил проблему:

    <div class="thumbnail" style="..position:relative;..">  
        <div style="position:absolute;">
        <div class="thumbnail-heart" style="..position:absolute;..">
            <img src="../image.png" style="float:right;position:relative;..">
            ...
        </div>
        </div>