Question

我创建了一个简单的div网格，左边是浮动它们，还有一个空div，每行末尾有一个清晰的。

这在Firefox中运行良好，但在IE中我在行之间获得额外的垂直空间。我试图应用“clearfix”方法，但我一定做错了。

为什么IE会插入额外的垂直空间，我该如何摆脱它呢？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        root {
            display: block;
        }

        body {
            background: white;
        }

        .colorChip {
            position:relative;
            float: left;
            width: 20px;
            height: 20px;
            margin: 2px;
            border-style: solid;
            border-width: 1px;
            border-color: black;
        }

        .clear {
            clear: both;
        }

        .clearfix {
            display:inline-block;
        }

        .clearfix:after, .container:after {
            clear:both;
            content:".";
            display:block;
            height:0;
            visibility:hidden;
        }

        * html .clearfix {
            height:1%;
        }
        .clearfix {
            display:block;
        }

    </style>
    <!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
</style>
<![endif]-->

  </head>

  <body>
    <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div>
    <div class="colorChip" style="background: rgb(190,170,113)"></div>
    <div class="colorChip" style="background: rgb(190,250,113)"></div>
    <div class="clear"></div>
    <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div>
    <div class="colorChip" style="background: rgb(215,197,154)"></div>
    <div class="colorChip" style="background: rgb(243,225,181)"></div>
    <div class="clear"></div>
    <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div>
    <div class="colorChip" style="background: rgb(129,118,92)"></div>
    <div class="colorChip" style="background: rgb(155,144,116)"></div>
    <div class="clear"></div>
  </body>
</html>

Answer 1

IE有点搞笑关于空<div> s - 它喜欢给它们一行文字的高度。

如果您将.clear更改为此值，它将缩小为1像素：

    .clear {
        clear: both;
        height: 1px;
        overflow: hidden;
    }

打开背景颜色以查看正在发生的事情

Answer 2

.clear {
    clear: both;
    height: 0px;
    overflow: hidden;
}

将其更改为0px效果更好..

Answer 3

没有它它可以在IE6中运行，但不适用于IE7，它可以在IE7中运行，但在IE6中增加了高度。没有任何词语来描述我对这个浏览器的仇恨。

Answer 4

高度：0px在IE 8中对我不起作用。另外，我不想要1px的高度，因为那时我的div上会有一条灰色背景的1px白线，我不想要为class =“clear”div的每个实例设置一个特殊的背景颜色。我试过line-height：0;它在IE8，IE7和IE6（我不关心任何旧版本）和FF 3.6中都运行得很好，没有添加额外的垂直空间。

.clear {
    clear: both;
    line-height: 0;
    overflow: hidden;
}

Answer 5

我在ie8中遇到了这个问题并使用了以下

.clear
{
    clear:both;
    height:0;
    width:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow: hidden;
    font-size:0px;
}

Answer 6

在这里看看： http://nadirnasir.blogspot.com/2009/04/ie-blank-space-after-img-tag-fix.html

div清除之后IE中额外的垂直空间

6 个答案: