IE6 и 7, странное поле 'наследование' - PullRequest
Новая
       12

IE6 и 7, странное поле 'наследование'

1 голос
/ 05 июня 2009

Я знаю об ошибке двойного поля, но это не так ... в сценарии есть элемент с нижним полем, а затем непосредственно под ним элемент, который содержит плавающие элементы (которые очищаются в конце), контейнерный элемент можно было бы сказать, что нижняя граница должна располагаться непосредственно под плавающими элементами, которые она содержит ... однако, т.е. в 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) вы заметите, что граница не появляется под текстом, а на расстоянии 50px от него ... на том же расстоянии, что и «Menu», на расстоянии от текст ..

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

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

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

1 Ответ

3 голосов
/ 05 июня 2009

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

Они также очистят ваш float в IE, так что вы можете удалить <div style="clear: left;"></div>. Для очистки поплавка в других браузерах используйте 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>
...