2

我注意到 IE7 中的奇怪行为在 Firefox 中没有发生。如果您在“testing 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>
4

5 回答 5

1

我不确定 IE 为什么要这样做，但一个相当巧妙的解决方案是将“测试 2”div 的内容与另一个 div 包装起来，如下所示：

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

但是，如果您能提供帮助，我建议不要使用 <br/>；如果可以的话，使用 CSS 对其进行排序！:)

于 2009-02-04T11:14:01.543 回答
1

IE7 确实存在嵌套元素及其边距的问题。

您可以通过强制“测试 2”具有 layoutdiv来解决此问题。

在这种情况下，设置height:100%;为“测试 2”div将恢复边距。我创建了一个工作示例来演示修复。

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

于 2009-02-13T09:15:56.340 回答
0

从语义上讲，您应该将该文本放在<p>,<blockquote>或其他块级元素中。尽量避免将文本直接放在 a<div>中，因为它们旨在用于指示页面中的分区或部分。

例如：

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

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

于 2009-02-13T02:43:59.747 回答
0

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

于 2009-02-09T21:53:10.837 回答
0


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

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

进入：

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

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

于 2009-02-04T11:13:51.967 回答