Xpoint
   [напомнить пароль]

Еще один сюрприз IE7: margin перед float-ом

Метки: [без меток]
[арх]
2010-05-26 18:34:52 [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]

Наткнулся на занятную бяку IE7, вот минимальный демонстрационный пример:

<!DOCTYPE HTML>
<html>
<head>
<title>Пример</title>
<style>
p { margin: 0; padding: 0; }
div { padding: 2px; }
</style>
</head>
<body>
<div style="width: 72%; float: left; background: #fcc;">
    <div>
        <div style="margin-bottom: 40px; width: 90%; background: #ccc;">
            <p>Отступ задан только здесь, с последующим блоком никак не связан...</p>
        </div>
    </div>
    <div style="width: 60%; float: left; background: #cfc;">
        <div style="width: 90%; background: #fff;">
            <p>Откуда же в IE7 берется отступ под этим блоком?</p>
        </div>
    </div>
    <!-- ...а если раскомментить это? ;)  -->
</div>
</body>
</html>

Двухпиксельные паддинги - исключительно чтобы видеть, что во что вложено. В нормальных браузерах нижний белый блок прижат к нижней рамке, как и положено. Но в IE7 откуда-то берется 40-пиксельный отступ под ним. Если же после светло-зеленого плавающего блока пустить обычный поток (не float), (напр., раскомментировав текст коммента в примере), призрачный отступ исчезает. К сожалению, в моей задаче это колдовство не подходит...

Буду безмерно благодарен за любые подсказки, что это за глюк и как еще можно его укротить!

спустя 4 часа 10 минут [обр] Илья Cтpeльцын aka SelenIT(12/171)[досье]
Добрые люди уже помогли найти общую формулировку решения: нужно изолировать блок с отступом в отдельном контексте форматирования. Подходит как overflow:hidden для второго дива (что в примере без стилей), так и любое свойство, включающее ему же hasLayout (старый добрый zoom:1, безвредно-валидный min-height: 1px и т.п.). Авось еще кому-нибудь окажется полезным... :)
Powered by POEM™ Engine Copyright © 2002-2005