Intereting Posts
Мультиграфы с javascript CSS: отзывчивый удлиненный шестиугольник с текстом и gradleиентом фона / границы input type = image – onclick (), инициирует его событие, но не действует хорошо на функцию в jquery Создание нового уникального пути к хранилищу Firebase в сочетании с хранением его в базе данных? HTML5 не основан на SGML и поэтому не требует ссылки на DTD Скользящая граница CSS Как скрыть конкретный контент, если $ page = name Использование разных версий D3 на одной странице html Вертикальные методы выравнивания Как нарисовать горизонтальную линию между двумя кругами с помощью css? Масштабирование canvasа HTML до размера windows браузера, но не масштабирование элементов в canvasе CSS. Выделите div, когда идентификатор связан с использованием привязки? Как сделать перенос текста выше и ниже div? минимальная высота с абсолютным позиционированием Как прокрутить вверх страницы с помощью JavaScript / jQuery?

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

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

..... ..... //like this i set for all td in table
//like this i set for all div in table
..... .....

Здесь div находится в верхнем углу тела. Все эти стили применяются к javascript и его работе в chrome, IE, но не в FF, как изображение ниже.

введите описание изображения здесь

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

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

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

  • Каждое изображение, помещенное внутри td //

  • если пользователь наводится на td, изображение должно пульсировать (эффект масштабирования).

  • Когда пользователь зависает, он должен перейти в предыдущее состояние (нормальный размер)

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

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

   

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

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

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

Я посмотрел плагин 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 Zoomed Div с изображениями в таблицах

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

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

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

  
ddd

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

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

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

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

в твоем случае:

 
..... .....
..... .....

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

  
...