Странное поведение с плавающей запятой в IE7
Я хочу создать простой блок с заголовком, содержащим заголовок и несколько кнопок инструментов. У меня такая разметка:
<div style = "float:left">
<div style = "background-color:blue; padding: 1px; height: 20px;">
<div style = "float: left; background-color:green;">title</div>
<div style = "float: right; background-color:yellow;">toolbar</div>
</div>
<div style = "clear: both; width: 200px; background-color: red;">content</div>
</div>
Это отлично работает в Firefox и Chrome:
http://www.boplicity.nl/images/firefox.jpg
Однако IE7 полностью сбивает с толку и помещает правильный плавающий элемент справа от страницы:
http://www.boplicity.nl/images/ie7.jpg
Это можно исправить?
Полезный css-class.com/articles/explorer/floats/floatandcleartest1.ht m
Ответы 6
Сделайте этот <div style = "background-color:blue; padding: 1px; height: 20px;> родительским для двух плавающих div, а также clear:all.
Извините, это не помогло. Вот скриншоты: www.boplicity.nl/images/firefox.jpg www.boplicity.nl/images/ie7.jpg
Укажите ширину в крайнем div. Если эта ширина в вашем div содержимого означает, что это общая ширина вашего блока, просто добавьте его к самому внешнему div и (необязательно) удалите его из содержимого, например:
<div style = "float:left; width: 200px;">
<div style = "background-color:blue; padding: 1px; height: 20px;">
<div style = "float: left; background-color:green;">title</div>
<div style = "float: right; background-color:yellow;">toolbar</div>
</div>
<div style = "clear: both; background-color: red;">content</div>
</div>
Это исправляет. Однако размер содержимого может быть неизвестен заранее. На моем сайте он обычно содержит таблицы, ширина которых может увеличиваться.
Это просто быстрый ответ, поэтому я поднимаю руки, если он не совсем работает. Я думаю, что решение Марко, вероятно, сработает, если вы просто добавите минимальную ширину, а не ширину. Если вы также пытаетесь обслужить ie6, вам может потребоваться взлом, поскольку минимальная ширина не поддерживается ie6 и его потомками.
Так что это должно работать с IE7 и другими современными браузерами. Установите подходящую минимальную ширину.
<div style = "float:left; min-width: 200px;">
<div style = "background-color:blue; padding: 1px; height: 20px;">
<div style = "float: left; background-color:green;">title</div>
<div style = "float: right; background-color:yellow;">toolbar</div>
</div>
<div style = "clear: both; background-color: red;">content</div>
</div>
К сожалению, минимальная ширина в этом случае не действует
Я исправил это с помощью jQuery, чтобы имитировать поведение браузеров, отличных от IE:
// IE fix for div widths - size header to width of content
if (!$.support.cssFloat) {
$("div:has(.boxheader) > table").each(function () {
$(this).parent().width($(this).width());
});
}
Как это отвечает на исходный вопрос?
Это устраняет проблему. Вместо того, чтобы устанавливать ширину статически, как предлагали другие плакаты, я теперь устанавливаю ее динамически.
Использование библиотеки javascript размером 50 КБ - не лучшее решение, если взлом CSS может это исправить.
Я уже использовал jQuery в своем приложении, так что это не было проблемой.
Попробуйте поместить position:relative; в родительский элемент и дочерний элемент. Это решило проблему для меня.
Недавно узнал, что правильные плавающие элементы должны быть добавлены с помощью div перед другими элементами. Это самый простой способ исправить, не добавляя ни строчки изменений.
<div style = "background-color:blue; padding: 1px; height: 20px;">
<div style = "float: right; background-color:green;">title</div>
<div style = "float: left; background-color:yellow;">toolbar</div>
</div>
Это правда, однако важное отличие здесь в том, что ваш внешний div не плавает. Если вы разместите это, это не сработает.
Возможно, вам потребуется дать немного больше контекста для этого вопроса. вы говорили, что область содержимого будет содержать таблицы разного размера?