Css IE7 div内的换行符弄乱了底部边距

我注意到IE7中出现了Firefox中没有的奇怪行为。 如果您注意到在“testing2div”中，当我在这个div的底部添加两个换行符时， 它不考虑为该div设置的保证金，“测试3”div就在它的正下方，没有保证金。当我删除“br”时，“test2”和“test3”div之间有边距

这是IE7错误还是有解决方法

测试1
测试2



测试3
测试4

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

进入：

---

。。。好吧，因为某种原因它不会通过。。。不间断的空格是“（没有引号，中间也没有空格）

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

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

测试2

---

但是，如果您能帮助，我建议不要使用
；如果可以，请使用CSS对所有内容进行排序！：）

不要使用

，而是在div上的

填充
规则之后使用
填充底部
。
从语义上讲，您应该将该文本放在
、
或其他块级元素中。尽量避免将文本直接放在
中，因为它们用于指示页面中的分区或部分

例如：

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


测试2


这解决了IE7中的问题，并将在其他浏览器中更一致地呈现。
IE7确实存在问题

您可以通过强制将'testing 2'
div
设置为来解决此问题

在本例中，设置
高度：100%code>上的code>将收回边距。我创建了一个示例来演示修复

值得注意的是，很大一部分IE CSS错误可以通过强制或删除元素中的布局来解决。
作为旁注，看起来您的和结束标记的顺序错误，并且使用了错误的斜杠（\代替/）。请改为使用“”。很抱歉将您的答案编辑到底部。试图解决这个问题，但失败了。没关系，我想大家都明白了。谢谢您的尝试：）
 <br><br>&nbsp;       <!--   THIS LINE -->

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

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