IE6 и 7, weird margin 'inheritance'

Question

Я знаю о ошибке двойного края, но это другое. В сценарии есть элемент с нижним полем, а затем непосредственно под ним элемент, содержащий плавающие элементы (которые очищенный в конце), элемент контейнера мог бы сказать нижнюю границу, которая должна располагаться под плавающими элементами, которые она содержит. Однако, например, IE7 и 6, нижняя граница отстоит от ее содержимого, на ту же сумму нижний край элемента над ним ..

Это не совсем наследство, более, что запас применяется в два раза и в неправильном положении .. вот некоторый код репо:

<h1 style="margin: 0 0 50px 0;">Menu</h1> 
<div style="border-bottom: solid 1px #000;"> 
    <div style="float: left;">Hello world?</div> 
    <div style="clear: left;"></div> 
</div> 

Придерживайтесь того, что на странице жалобы (я использовал xhtml transitional) вы заметите, что рамка не отображается под текстом, но на расстоянии 50 пикселей от нее ... такое же расстояние, что «Меню» отстоит от текста ..

Протестируйте это против сказать .. IE8, и граница правильно сидит под текстом.

Это то, что я заметил ранее, и сумел игнорировать и работать вокруг, но мне интересно, если это ошибка называется, и если есть хороший способ получить вокруг него ..

(путь, который я обычно обошел, это пространство H1 с дополнением вместо этого, но это не всегда разумно).

Answer 1

Вам нужно вызвать hasLayout на внешний div, чтобы IE отображался правильно. Вы можете сделать это, добавив ширину или высоту в div или увеличить: 1.

Это также очистит ваш поплавок в IE, чтобы вы могли удалить <div style="clear: left;"></div>. Чтобы очистить float в других браузерах, используйте overflow: hidden;

<h1 style="margin: 0 0 50px 0;">Menu</h1> 
<div style="border-bottom: solid 1px #000;overflow:hidden;zoom:1;"> 
    <div style="float: left;">Hello world?</div> 
</div>