编辑:这只发生在IE8中,它在IE7,Firefox,Opera等中运行良好

首先,这是我在photoshop中制作的一张图片来展示我的问题: http//richardknop.com/pict.jpg

现在你应该了解我的问题。 这是我正在使用的标记的简化版本(我遗漏了大多数不相关的内容):

<div class="left">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="right">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    // NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    // box content
</div>

CSS样式是这样的:

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

很显然,我遗漏了所有不同的风格,如边框,背景颜色和图像,字体大小等。我只保留了重要的东西。

知道哪里可能是问题?

#1楼 票数:9 已采纳

看看padding-top: 10px有效。 可能是保证金试图从页面顶部开始。

#2楼 票数:6

我认为这是一个IE8错误。 与浮动的左右div的兄弟元素相关。 无论是否有清算div,最终的解体元素都会在IE8中失去其上边距。

我们测试了这个,只有IE8错了:

http://www.inventpartners.com/content/ie8_margin_top_bug

我们还提出了3个解决方案。

#3楼 票数:1

尝试关闭你的明确div。

<div class="clear"></div>

#4楼 票数:1

我不太明白这种方法。 您可以使用右侧和左侧的<div>包装另一个<div>并将overflow: hiddenwidth: 100%应用于它,以便下面浮动元素的元素将正确显示。

#5楼 票数:1

enter code here尝试使用宽度为overflow的容器:隐藏在浮动的div周围,并删除已清除的div。

    <div id="container">
        <div class="left">    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
        <div class="right">    
            <div class="box">        // box content right    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
    </div>
    <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    // box content</div>

和CSS

#container { width: 100%; overflow: hidden; }

(对不起,我把IE7留在我的工作机器上进行测试,所以我无法验证)

#6楼 票数:1

我有类似的问题,Matt Bradley提供的解决方案对我不起作用(但感谢你发布它!)。 我希望在h1元素上有margin-top:10px。

我想出的解决方案是将位置:relative,top:10px和margin-top:0px添加到h1元素。

#7楼 票数:0

我没有IE8和我...但你是否尝试添加清除:两者都在底部div并为其中一个顶部浮动添加底部边距? 我很确定没有任何额外的div会达到同样的效果。

  ask by Richard Knop translate from so

未解决问题?本站智能推荐:

5回复

保证金汽车噩梦

我尝试了各种各样的方式,但对于我的生活,我无法理解为什么导航菜单不会居中。 我尝试过text-align,margin-auto,block display ......在父母和孩子身上。 我敢肯定这是简单的事情,但这开始导致脱发。 该演示可在此处获得 : 如果你想看一些代码,这
1回复

Internet Explorer [CSS]中总是出现异常的保证金

仅在Internet Explorer中会发生这种情况:我在字段集下获得了一个额外的边距(19像素),无论尝试什么,我似乎都看不出为什么! 自己尝试一下,看看http://theshrop.com/d/call_us_or_call_in.php 。 为了帮助我添加了网格和一些背景色。 该
1回复

IE6 + 7-双底保证金

我很清楚在 float s发生的IE-6 + 7中著名的双边距错误 。 我遇到了类似的情况,但是IE-6正在使顶部导航栏的底部边距加倍(并且实际上未在任何地方指定底部边距。) 我不确定这种现象是否是IE-6双重漏洞的一个例子,但是通常的修复方法( display:inline )都没有影
2回复

IE中的保证金问题

IE出现问题。 我网站的网址是www.trecall.com。 我想在动画菜单的左侧放置一个边距,以使菜单居中于页面中心。 这在FF中效果很好,但是在IE中,没有显示边距。 知道为什么吗? 谢谢!!
2回复

IE兼容性,保证金问题

我大约一个月前在这家公司开始,我一直在努力清理他们的网站。 这真是一团糟。 我的老板使用的是IE,但我使用的是Chrome,只是运行和枪战。 jQuery滑块下面的标题是:“世界级机械工程师和承包商 - 在中央PA”到了<td>的最左边,但是另一个h1却没有。 我希望该网站在
1回复

CSS IE和Firefox中的保证金问题

我正在尝试在HTML / CSS中制作横幅。 但是,我在一个div的边距上遇到了麻烦。 它在Firefox中可以完美运行,但在IE中则不能。 这是#lowerText的h3标签, #lowerText写着“ -Foo foo foo bar”。 在IE中,它仅显示:“ oo bar
3回复

保证金:0自动; 在IE中无法正常工作也一切都麻烦。 UL也会造成混乱

IE给我带来很多麻烦。 即使我最初已将所有标签重置为重置状态,整个页面仍处于混乱状态。 Mozilla和Chrome可以正确显示它,但是IE造成了很大的压力。 如果有人可以帮助我,我将非常感激。 jQuery也无法正常工作。 和div错位了 首先在mozilla中查看它,以了
1回复

ie8保证金最高错误

我不知道为什么IE8是这样做的,但我有一个包含导航两个div。 一个漂浮在左边,另一个漂浮在右边。 两个div的边距顶部均为10px。 在所有其他浏览器中,除IE8之外,一切看上去都很不错。 上边距消失。 我尝试将doctype从HTML5更改为过渡型,更改为严格,并且没有运气。