Намедни пишет мне клиент, мол, на сайте логотип уплыл. Я спрашиваю, какой браузер? FireFox, говорит. Тестирую и так и эдак — всё у меня нормально. Думаю, может у него Огненный лис 2.х, ан нет — 3.0 с чем-то. У меня установлен уже не очень свежий 3.5.
Так был обнаружен странный феномен различного рендеринга «плавающих» дивов с float и последующим позиционированием relative в Firefox 3.5 и 3.0. Разницу вы можете видеть на нижепредставленных картинках. Код один, результат разный.
По просьбе ребят из @nzwebdev я создал тестовую страницу, демонстрирующую этот эффект. Ниже пояснения для тех, кто не может посмотреть в исходник.
Страница состоит из двух идентичных контейнеров, описанных следующим образом. Наличие border и фонового цвета на появление багофичи не влияет.
В каждом контейнере находятся текст и другой контейнер, описанный следующим образом:
Второй div плавающий. Предполагается, что он должен сместиться вправо, а текст должен обтекать его слева. Оказалось, что браузеры дают разные результаты в случае, если плавающий div разместить после текста. Во втором контейнере div с классом logo_and_caption, как вы могли заметить на иллюстрациях, остаётся на своём месте.
Занятно, что добавление padding внешнему контейнеру исправляет проблему.
Надеюсь, кому-то это поможет в борьбе с магическими перемещениями объектов на странице. Спасибо.
Так был обнаружен странный феномен различного рендеринга «плавающих» дивов с float и последующим позиционированием relative в Firefox 3.5 и 3.0. Разницу вы можете видеть на нижепредставленных картинках. Код один, результат разный.
По просьбе ребят из @nzwebdev я создал тестовую страницу, демонстрирующую этот эффект. Ниже пояснения для тех, кто не может посмотреть в исходник.
Страница состоит из двух идентичных контейнеров, описанных следующим образом. Наличие border и фонового цвета на появление багофичи не влияет.
.content {
background-color: #eee;
border: solid 1px #ccc;
margin-bottom: 5em;
/* Добавление контейнеру padding >= 3em нивелирует проблему */
/* padding: 3em; */
}В каждом контейнере находятся текст и другой контейнер, описанный следующим образом:
div.logo_and_caption {
background-color: #ccc;
border: solid 1px #ddd;
float: right;
position: relative;
top: -1.5em;
}Второй div плавающий. Предполагается, что он должен сместиться вправо, а текст должен обтекать его слева. Оказалось, что браузеры дают разные результаты в случае, если плавающий div разместить после текста. Во втором контейнере div с классом logo_and_caption, как вы могли заметить на иллюстрациях, остаётся на своём месте.
Занятно, что добавление padding внешнему контейнеру исправляет проблему.
Надеюсь, кому-то это поможет в борьбе с магическими перемещениями объектов на странице. Спасибо.
