Позиционирование на разных браузерах

Question

У меня возникла проблема, когда элемент, который находится на своем собственном уровне на странице, по-разному размещается в разных браузерах. Это слайд-шоу; http://nevillebeandesign.com/Tattoo/bobShaw.html В Safari он на несколько пикселей выше, чем в Firefox и Chrome, и значительно ниже в Opera. Мне пришлось уменьшить его размер, чтобы он не перекрывал красные линии в фоновом изображении (первоначально в Safari он плотно прилегал между двумя красными линиями). Есть ли какое-то исправление, которое я могу поместить в голову документа, который будет регулировать позиционирование для разных браузеров? Благодаря!

Answer 1

Проблема связана с элементом < >, который вы используете, который вставлен внутри ячейки. Кроме того, многие старые причуды вступают в игру, так как вы полагаетесь на устаревшую структуру разметки (таблица). В принципе, ваш элемент называется встроенным блоком в CSS. Это означает, что он может принимать свойство vertical-align. Однако в вашем случае вы вынуждаете браузеры использовать свои внутренние алгоритмы, потому что вы использовали атрибут align (устаревший). Вот почему вы видите другое вертикальное выравнивание в разных браузерах. Чтобы исправить это, укажите элемент объекта с указанной высотой и попробуйте применить объявление CSS «вертикально-выровнять: среднее» CSS к самому объекту. Вы также можете попытаться установить соответствующую «высоту строки» в контейнере объекта.