IE 7/8 рендеринг Iinline (Floated Divs) в виде блока: ширина не подстраивается под содержание?
-
03-07-2019 - |
Вопрос
У меня есть блочный элемент (DIV), который растягивается на всю страницу. Он содержит несколько плавающих DIV переменной ширины. Этот элемент может существовать на многих веб-страницах (любой может разместить его на своем веб-сайте). В FF на всех сайтах он отображается правильно, а плавающие DIV имеют ширину, равную их внутреннему содержанию. В IE это работает иногда, но на других сайтах это не так, и вместо этого он растягивает каждый перемещенный DIV на ширину родительского элемента, чего не должно быть. Прикрепленное изображение - дополнительная иллюстрация (красный DIV - контейнер, черные DIV - плавающие).
http://img8.imageshack.us/img8/4734/screenrrl.jpg (Изображение является фотошопом, а не реальным HTML-рендером)
Решение
Нашел это! Проблема в том, что я использовал один DIV, чтобы очистить все элементы внутри родителя. Некоторые режимы рендеринга в IE имеют проблемы с этим. Вместо этого я заменил его, добавив класс clearfix к родителю!
Другие советы
вы можете использовать это исправление для ul (я полагаю, оно используется на скриншоте):
#list { overflow: hidden; zoom: 1; }
вместо " clear: both; ".