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>

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

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

Changing it to 0px works better..

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.

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;
}

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;
}

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