extra vertical space in IE after div clear

问题

I have created a simple grid of divs by left floating them and an empty div with a clear at the end of each row.

This works fine in Firefox, but in IE I get extra vertical space between rows. I tried to apply the "clearfix" method, but I must be doing something wrong.

Why does IE insert the extra vertical space and how can I get rid of it?

<!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>

回答1:

IE is a bit funny about empty <div>s - it likes to give them the height of a line of text.

If you change .clear to this, it'll shrink to 1 pixel:

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

Put a background colour on to see what's happening

回答2:

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

Changing it to 0px works better..

回答3:

Without it it works in IE6, but not IE7, with it it works in IE7, but adds height in IE6. There is not word to describe my hatred towards this browser.

回答4:

The height: 0px did not work for me in IE 8. Also, I did not want a height of 1px, because then there would be a 1px white line across my div with a grey background, and I didn't want to set a special background color for every instance of a class="clear" div. I tried line-height: 0; and it worked great in IE8, IE7, and IE6 (I don't care about anything older than that) and FF 3.6, no additonal vertical space was added.

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

回答5:

I had this issue with ie8 and used following

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

回答6:

Take a look in here too: http://nadirnasir.blogspot.com/2009/04/ie-blank-space-after-img-tag-fix.html

来源：https://stackoverflow.com/questions/473143/extra-vertical-space-in-ie-after-div-clear

标签

internet-explorer

html

clear