Question

我注意到IE7中的奇怪行为在Firefox中没有出现。如果您在“测试2”“div”中注意到，当我在此div的底部添加2个换行符时，它不尊重为此div设置的边距，并且“test 3”div正好位于它下方，没有边距。当我删除“br”时，“test 2”和“test 3”div在它们之间有边距。

这是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

我不确定为什么IE会这样做，但一个合理的解决方案是用另一个div包装“testing 2”div的内容，如下所示：

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

但是我建议不要使用＆lt; br /＆gt;如果你能帮助它;如果可以的话，使用CSS对它进行排序！：）

Answer 2

IE7的确存在nested elements and their margins的问题。

您可以通过强制将“测试2”div强制为have layout来解决此问题。

在这种情况下，在'测试2'height:100%;上设置div将获得边距。我创建了一个working example来演示修复程序。

值得注意的是，通过强制或从元素中删除布局，可以解决很大一部分IE CSS错误。

Answer 3

可能不是最好的解决方案，但在标签帮助后添加一个不间断的空间：改变

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

成：

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

...好的，由于某种原因它不会通过......不间断的空间是“＆amp; nbsp;” （没有引号，中间没有空格）

Answer 4

不要使用<br>，而是在padding-bottom规则之后使用padding ，在您的div上。

Answer 5

从语义上讲，您应该将该文本放在<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中的问题，并且在其他浏览器中也会更加一致。

内部的IE7换行会扰乱底部边缘

5 个答案: