Странное поведение плавающее в IE7
Вот онлайн-тестер регулярных выражений, над которым я работал, вы можете просто заменить свои данные образцами.
Regex : (\w+;)((\w+);(\w+))(;\w+)
4 ответа
Укажите ширину в наиболее удаленном отделении. Если та ширина в Вашем отделении содержания означает, что это - общая ширина Вашего поля, просто добавьте его к наиболее удаленному отделению и (дополнительно) удалите его из содержания, как это:
<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>
Это - просто быстрый ответ, таким образом, я поднимаю руки, если он не вполне работает. Я думаю, что решение Marko будет, вероятно, работать, если Вы просто добавите минимальную ширину, а не ширину. При попытке обслужить ie6 также, Вы, возможно, должны использовать взлом, поскольку минимальная ширина не поддерживается ie6, и это - потомки.
Таким образом, это должно работать с IE7 и другим современным browers. Установите минимальную ширину на то, что является соответствующим.
<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>
Сделайте это <div style="background-color:blue; padding: 1px; height: 20px;> родитель 2 плавающих отделений также clear:all
Я исправил это с помощью 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());
});
}