Intereting Posts
nested li – на нажатие дочернего элемента, событие родительского щелчка, вызванное Получите значение при наведении диапазона входного типа получение Не удается получить доступ к URL-адресу chrome: //, хотя я его не называю В чем разница между «Источником» и «Генерированным источником»? Как я могу принудительно загрузить с помощью html и / или javascript? Как установить максимальную высоту N-родительских высот с помощью CSS? Почему этот код на основе setTimeout не работает в Firefox с небольшим таймаутом (работает в Internet Explorer / Chrome)? Вместо добавления другого элемента Он приземляется на другую страницу Objective-C: Как заменить HTML-объекты? SEC7113: CSS игнорировался из-за несоответствия типа mime Остановить форму submit с помощью встроенного javascript Список миниатюр Bootstrap не показывает эскизы Как написать вывод в html-файл с помощью Python BeautifulSoup Показывать или идентифицировать и сфокусировать скрытое обязательное поле при отправке формы Как определить, какой элемент находится в центре экрана с позиции прокрутки?

абсолютная позиция 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, который зафиксировал проблему:

  
...