Странное поведение с плавающей точкой в IE7
-
06-07-2019 - |
Вопрос
Я хочу создать простое поле со строкой заголовка, содержащей заголовок и несколько кнопок инструментов. У меня есть следующая разметка:
<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
Это можно исправить?
Решение
Укажите ширину в самом внешнем 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());
});
}
Попробуйте поместить position:relative;
в родительский элемент и дочерний элемент. Это решило проблему для меня.
Недавно узнал, что к плавающим элементам нужно добавить правые элементы перед другими элементами. Это самое простое исправление без добавления строки изменений.
<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 style = " background-color: blue; обивка: 1px; height: 20px; >
родитель 2-х плавающих элементов div также clear: all