Боремся с двойным отступом в IE6 при использовании float
Пятница, 6 июня 2008
Этим постом хочу начать раскрытие одной важной темы — различных багов в браузерах и методов борьбы с ними. В основном, конечно же, это касается CSS-верстки и написания js-скриптов. По опыту знаю, что каждая такая проблема способна измотать нервы не на один день, затянуть сдачу проекта и вызвать недовольство клиента.
Итак проблема
При использованиии двух вложенных элементов блочного уровня, к которым применены CSS-свойства float и margin, IE6 увеличивает значение отступов (только горизонтальных) в два раза, т. е. если применить к такому блоку например margin-left: 50px, то в шестом эксплорере мы получим отступ ровно в 100px, а не в 50px как во всех нормальных браузерах.
Как победить
Можно конечно использовать совет под номером 3 от Никиты Селецкого, но я предпочитаю другой способ. Обычно хватает просто добавить к блоку свойство display:inline, которое заставляет IE6 нормально отобразить отступ и успешно игнорируется остальными браузерами. При этом <div>...</div> сохраняет свойства объекта блочного уровня.
Если не верите, можете посмотреть рабочий пример.
Противопоказания
Не замечены. CSS проходит валидацию.
* * *
Постовой:
Обучение SEO, поисковая оптимизация в Минске. Помощь в решении задач по тепломассообмену.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Боремся с двойным отступом в IE6 при использовании float
- добавьте статью в закладки:
* * *
Да я уже тоже использую этот способ ))
Радует, что есть тут хоть кто-то живой на блоге кроме меня *)
Больше пиши со ссылками на чужие блоги — больше будут приходить. ))
Да вроде и сейчас заходят, просто почему-то стесняются комментить, больше подглядывают.
Подглядываем-подглядываем ;)
Смотрим и мотаем на ус :-)
Я тоже к вам заглядываю поподглядывать ))
Все верно. Старый, проверенный временем (и гуру браузерных багов — 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 отображается по-другому чем в остальных браузерах. Если можно пошагово напишите, что куда вставлять. Очень Спасибо.
Огромное спасибо :) Отличный прием!
Спасибо! Пол дня сидел, понять не мог чего ослу не нравится. Будем знать теперь. :)
Спасибо за подсказку. Долго парился. А всё просто решилось.