IE7 разрыв строки внутри div портит нижнее поле

Question

Я заметил странное поведение в IE7, которого нет в Firefox. Если вы заметили в «тестировании 2» «div», когда я добавляю 2 разрывов строки в нижней части этого div он не учитывает поле, установленное для этого div, и div «test 3» находится прямо под ним без полей. Когда я удаляю "br", то у разделов "test 2" и "test 3" между ними есть поля.

Это ошибка IE7 или есть обходной путь для этого?

    <div style="border: dotted 1px red;">

    <div id="main" style="border: solid 1px black; padding: 10px; margin: 5px; float:left ">
    testing 1


       <div style="border: solid 1px black; padding: 10px; margin: 10px;">
             testing 2
             <br><br>       <!--   THIS LINE -->
         </div>


        <div style="border: solid 1px black; padding: 10px; margin: 10px; ">

        testing 3
        </div>


    </div>

    <div style="border: solid 1px black; padding: 10px; margin: 20px; float: left">

        testing 4
    </div>

    <div style="clear:both"></div>

    </div>

<\html><\body>

Answer 1

IE7 действительно имеет проблемы с вложенными элементами и их полями .

Вы можете исправить это, принудительно настроив для «тестирования 2» div значение .

В этом случае установка height:100%; в «тестирование 2» div вернет поля. Я создал рабочий пример для демонстрации исправления.

Стоит отметить, что значительная часть ошибок IE CSS может быть устранена путем принудительного или удаления макета из элемента.

Answer 2

Я не уверен, почему IE делает это, но одно разумное решение - обернуть содержимое div "testing 2" другим div, например, так:

<div style="border: solid 1px black; padding: 10px; margin: 10px;">
    <div>
        testing 2
        <br/>
        <br/>
        <!--   THIS LINE -->
    </div>
</div>

Однако я бы посоветовал не использовать
, если вы можете помочь; разберитесь с помощью CSS, если можете! :)

Answer 3

Семантически, вы должны поместить этот текст в <p>, <blockquote> или другой элемент уровня блока. Старайтесь не размещать текст непосредственно внутри <div>, так как он предназначен для указания разделов или разделов на странице.

Например:

<div style="border: 1px solid black; padding: 10px; margin: 10px;">
    <p style="margin: 0 0 10px 0;">testing 2</p>
</div>

Это решит вашу проблему в IE7 и отобразит более согласованно в других браузерах.

Answer 4

Вместо использования <br>, используйте padding-bottom после правила padding в вашем div.

Answer 5

Возможно, это не самое удачное решение, но добавление неразрывного пробела после тегов
поможет: Изменить

 <br><br>       <!--   THIS LINE -->

в:

 <br><br>&nbsp;       <!--   THIS LINE -->

... Ладно, по какой-то причине это не пройдет ... неразрывный пробел - "& nbsp;" (без кавычек и без пробела)