Боремся с двойным отступом в IE6 при использовании float

Боремся с двойным отступом в IE6 при использовании float

Этим постом хочу начать раскрытие одной важной темы — различных багов в браузерах и методов борьбы с ними. В основном, конечно же, это касается CSS-верстки и написания js-скриптов. По опыту знаю, что каждая такая проблема способна измотать нервы не на один день, затянуть сдачу проекта и вызвать недовольство клиента.

Итак проблема

При использованиии двух вложенных элементов блочного уровня, к которым применены CSS-свойства float и margin, IE6 увеличивает значение отступов (только горизонтальных) в два раза, т. е. если применить к такому блоку например margin-left: 50px, то в шестом эксплорере мы получим отступ ровно в 100px, а не в 50px как во всех нормальных браузерах.

Боремся с двойным отступом в IE6 при использовании float (иллюстрация)

Как победить

Можно конечно использовать совет под номером 3 от Никиты Селецкого, но я предпочитаю другой способ. Обычно хватает просто добавить к блоку свойство display:inline, которое заставляет IE6 нормально отобразить отступ и успешно игнорируется остальными браузерами. При этом <div>...</div> сохраняет свойства объекта блочного уровня.

Если не верите, можете посмотреть рабочий пример.

Противопоказания

Не замечены. CSS проходит валидацию.

* * *

Постовой:

Обучение SEO, поисковая оптимизация в Минске. Помощь в решении задач по тепломассообмену.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 31

  1. Nikita, 06.06.2008 в 13:18

    Да я уже тоже использую этот способ ))

    Ответить

  2. rotor, 06.06.2008 в 16:52

    Радует, что есть тут хоть кто-то живой на блоге кроме меня *)

    Ответить

  3. Nikita, 06.06.2008 в 23:35

    Больше пиши со ссылками на чужие блоги — больше будут приходить. ))

    Ответить

  4. rotor, 07.06.2008 в 1:19

    Да вроде и сейчас заходят, просто почему-то стесняются комментить, больше подглядывают.

    Ответить

  5. Sam, 09.06.2008 в 17:21

    Подглядываем-подглядываем ;)

    Ответить

  6. Dmytro Shteflyuk, 09.06.2008 в 18:14

    Смотрим и мотаем на ус :-)

    Ответить

  7. rotor, 09.06.2008 в 19:13

    Я тоже к вам заглядываю поподглядывать ))

    Ответить

  8. Sukebe, 09.06.2008 в 20:22

    Все верно. Старый, проверенный временем (и гуру браузерных багов — positioniseverything.net/...bled-margin.html) трюк.

    Ответить

  9. kuindzi, 09.06.2008 в 20:35

    Ух. А я то думал, наука что-то новое открыла.

    Но всё равно спасибо. И тоже сюда заглядываю...

    Ответить

  10. Bolzamo, 09.06.2008 в 22:06

    [:||| Баян |||:]

    Но я уже и забыл про эту фишку, потому для меня ее можно считать новой, как хорошо забытое старое :)

    Ответить

  11. rotor, 09.06.2008 в 22:36

    2Bolzamo

    Красивый баян! o_O

    Ответить

  12. Юра, 10.06.2008 в 16:11

    спасибо!

    очень помогают эти вещи мне как начинающему

    Ответить

  13. rotor, 10.06.2008 в 18:05

    Да не за что! Так как тема багов слабо освещена в Рунете, то будет еще инфа по этому поводу.

    Ответить

  14. Буян, 17.06.2008 в 20:22

    Хоть и в первый раз здесь, все равно спасибо.

    Добавил в избранное.

    Ответить

  15. Степан Aгарков, 30.07.2008 в 22:29

    Даа... В этом блоге хоть комментаторы вменяемые А то пишут в коменты ерунду всякую.

    Ответить

  16. fullseo, 03.08.2008 в 17:36

    Сегодня как раз читал что есть фича для устранения данного косяка именно в 6-ой версии IE

    Ответить

  17. Andrey, 28.08.2008 в 13:32

    В IE6 подменю куда то уехало www.leilytravel.kz, в остальных браузерах все нормально смотрится подскажите в чем дело???

    Ответить

  18. rotor, 28.08.2008 в 14:45

    Какие-то проблемы у вас с сервером и сайтом, периодически error 403 проскальзывает. Приведите его к более-менее наглядному виду, тогда подскажу.

    Сейчас в IE6 не работают скрипты вообще, большая половина изображений не догружается.

    Горизонтальное подменю улетает в сторону в IE7.

    >в остальных браузерах все нормально смотрится

    горизонтальный скролл в IE7 и Opera9 для сайта шириной 800px на разрешении экрана в 1280px это не нормально.

    Ответить

  19. Olchik, 23.09.2008 в 11:40

    Спасибо огромное! Я новичок, и мне это очень помогло!!! :)

    Ответить

  20. valash, 22.10.2008 в 17:12

    Спасибо за инфу.

    Раньше не слышал, буквально вчера с этим при тестировании сайта столкнулся.

    Попробовал сейчас — порядок, всё пашет и пляшет.

    Ещё раз — спасибо! (где смайлик с пивом?))

    Ответить

  21. mif, 19.11.2008 в 23:37

    Спасибо! Долго бился на проблемой, пока не заглянул сюда.

    Ответить

  22. ThyBzi, 14.12.2008 в 21:09

    А как вам такой чудесный таракан в любимом IE6?

    http://www.thybzi.com/ie6-height-1px.html

    Смотреть в ИЕ6, разумеется :) Ну а в любом другом можно просто прочитать текст и поверить на слово.

    Ответить

  23. rotor, 15.12.2008 в 12:26

    Хороший таракан :)

    Я с таким не сталкивался, потому, что не нужны были div высотой в один пиксель, но узнать было интересно. Спасибо.

    Не нашли решений этой проблемы? Что-то подсказывает, что дело скорее всего в реализации hasLayout, оттуда и нужно копать.

    Ответить

  24. seamore, 03.02.2009 в 0:09

    Спасибо за решение. А вот с таким не сталкивались — отступы в формах, справа — и в IE7 тоже. Устал уже бороться с этой гидрой...

    Ответить

  25. rotor, 03.02.2009 в 12:09

    seamore, покажите пример.

    Ответить

  26. pinochet, 13.08.2009 в 13:55

    help пожалуйста. есть сайт popartstudio.ru в IE6 отображается по-другому чем в остальных браузерах. Если можно пошагово напишите, что куда вставлять. Очень Спасибо.

    Ответить

  27. Termos, 26.08.2009 в 13:09

    Огромное спасибо :) Отличный прием!

    Ответить

  28. Владимир, 05.09.2009 в 20:29

    Спасибо! Пол дня сидел, понять не мог чего ослу не нравится. Будем знать теперь. :)

    Ответить

  29. Игорь, 17.06.2010 в 14:03

    Спасибо за подсказку. Долго парился. А всё просто решилось.

    Ответить

  30. Сергей, 20.04.2011 в 16:37

    ВАМ ОГРОМНОЕ СПАСИБО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Ответить

  31. Алекс, 26.07.2011 в 15:22

    *Простой совет от Алекса*

    Была у меня ситуация, когда правая колонка «съезжала» под соседний div: основной слой шириной 900px, внутри него два div размерами 700px и 200px соответственно, со значением float:left. IE6 настойчиво не хотел «видеть» правую колонку (200px) и «подсовывал» её под соседнюю, ту, которая шириной 700px. Что я сделал? Да ничего. Внимательно посмотрел код и нашел слой, внутри которого был отступ — padding:5px. Он то и давал «лишние» пиксели, отодвигая правую колонку. Поэтому, надо или убрать padding (если такой имеется в коде соседней колонки), или добавить в ширину основного («родительского») дива дополнительные пиксели (но это не лучшее решение). Так что, прежде чем добавлять что-то в стили CSS (для IE6), надо посмотреть весь код на наличие ошибок или «лишних» отступов ;)

    Делаю Ростовский сайт здесь АлексДо.ру

    Ответить

Есть что сказать?