Боремся с двойным отступом в IE6 при использовании float
Пятница, 6 июня 2008
Этим постом хочу начать раскрытие одной важной темы — различных багов в браузерах и методов борьбы с ними. В основном, конечно же, это касается CSS-верстки и написания js-скриптов. По опыту знаю, что каждая такая проблема способна измотать нервы не на один день, затянуть сдачу проекта и вызвать недовольство клиента.
Итак проблема
При использованиии двух вложенных элементов блочного уровня, к которым применены CSS-свойства float и margin, IE6 увеличивает значение отступов (только горизонтальных) в два раза, т. е. если применить к такому блоку например margin-left: 50px, то в шестом эксплорере мы получим отступ ровно в 100px, а не в 50px как во всех нормальных браузерах.
Как победить
Можно конечно использовать совет под номером 3 от Никиты Селецкого, но я предпочитаю другой способ. Обычно хватает просто добавить к блоку свойство display:inline, которое заставляет IE6 нормально отобразить отступ и успешно игнорируется остальными браузерами. При этом <div>...</div> сохраняет свойства объекта блочного уровня.
Если не верите, можете посмотреть рабочий пример.
Противопоказания
Не замечены. CSS проходит валидацию.
* * *
Постовой:
Обучение SEO, поисковая оптимизация в Минске. Помощь в решении задач по тепломассообмену.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Да я уже тоже использую этот способ ))
Радует, что есть тут хоть кто-то живой на блоге кроме меня *)
Больше пиши со ссылками на чужие блоги — больше будут приходить. ))
Да вроде и сейчас заходят, просто почему-то стесняются комментить, больше подглядывают.
Подглядываем-подглядываем ;)
Смотрим и мотаем на ус :-)
Я тоже к вам заглядываю поподглядывать ))
Все верно. Старый, проверенный временем (и гуру браузерных багов — positioniseverything.net/...bled-margin.html) трюк.
Ух. А я то думал, наука что-то новое открыла.
Но всё равно спасибо. И тоже сюда заглядываю...
[:||| Баян |||:]
Но я уже и забыл про эту фишку, потому для меня ее можно считать новой, как хорошо забытое старое :)
2Bolzamo
Красивый баян! o_O
спасибо!
очень помогают эти вещи мне как начинающему
Да не за что! Так как тема багов слабо освещена в Рунете, то будет еще инфа по этому поводу.
Хоть и в первый раз здесь, все равно спасибо.
Добавил в избранное.
Даа... В этом блоге хоть комментаторы вменяемые А то пишут в коменты ерунду всякую.
Сегодня как раз читал что есть фича для устранения данного косяка именно в 6-ой версии IE
В IE6 подменю куда то уехало www.leilytravel.kz, в остальных браузерах все нормально смотрится подскажите в чем дело???
Какие-то проблемы у вас с сервером и сайтом, периодически error 403 проскальзывает. Приведите его к более-менее наглядному виду, тогда подскажу.
Сейчас в IE6 не работают скрипты вообще, большая половина изображений не догружается.
Горизонтальное подменю улетает в сторону в IE7.
>в остальных браузерах все нормально смотрится
горизонтальный скролл в IE7 и Opera9 для сайта шириной 800px на разрешении экрана в 1280px это не нормально.
Спасибо огромное! Я новичок, и мне это очень помогло!!! :)
Спасибо за инфу.
Раньше не слышал, буквально вчера с этим при тестировании сайта столкнулся.
Попробовал сейчас — порядок, всё пашет и пляшет.
Ещё раз — спасибо! (где смайлик с пивом?))
Спасибо! Долго бился на проблемой, пока не заглянул сюда.
А как вам такой чудесный таракан в любимом IE6?
http://www.thybzi.com/ie6-height-1px.html
Смотреть в ИЕ6, разумеется :) Ну а в любом другом можно просто прочитать текст и поверить на слово.
Хороший таракан :)
Я с таким не сталкивался, потому, что не нужны были div высотой в один пиксель, но узнать было интересно. Спасибо.
Не нашли решений этой проблемы? Что-то подсказывает, что дело скорее всего в реализации hasLayout, оттуда и нужно копать.
Спасибо за решение. А вот с таким не сталкивались — отступы в формах, справа — и в IE7 тоже. Устал уже бороться с этой гидрой...
seamore, покажите пример.
help пожалуйста. есть сайт popartstudio.ru в IE6 отображается по-другому чем в остальных браузерах. Если можно пошагово напишите, что куда вставлять. Очень Спасибо.
Огромное спасибо :) Отличный прием!
Спасибо! Пол дня сидел, понять не мог чего ослу не нравится. Будем знать теперь. :)
Спасибо за подсказку. Долго парился. А всё просто решилось.
ВАМ ОГРОМНОЕ СПАСИБО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*Простой совет от Алекса*
Была у меня ситуация, когда правая колонка «съезжала» под соседний div: основной слой шириной 900px, внутри него два div размерами 700px и 200px соответственно, со значением float:left. IE6 настойчиво не хотел «видеть» правую колонку (200px) и «подсовывал» её под соседнюю, ту, которая шириной 700px. Что я сделал? Да ничего. Внимательно посмотрел код и нашел слой, внутри которого был отступ — padding:5px. Он то и давал «лишние» пиксели, отодвигая правую колонку. Поэтому, надо или убрать padding (если такой имеется в коде соседней колонки), или добавить в ширину основного («родительского») дива дополнительные пиксели (но это не лучшее решение). Так что, прежде чем добавлять что-то в стили CSS (для IE6), надо посмотреть весь код на наличие ошибок или «лишних» отступов ;)
Делаю Ростовский сайт здесь АлексДо.ру