How To Attack An Internet Explorer (Win) Display Bug

How To Attack An Internet Explorer (Win) Display Bug - Holly hack

A very large percentage of IE/Win bugs are triggered by the lack of any stated dimensions on elements that contain nested floats. In other words, if you have a box without either a width or a height, and nest one or more floats inside, some very weird display bugs may declare themselves. Such bugs can happen without floats, but are far rarer than the float variety.
The Peekaboo Bug falls into this "dimensional bug" class, as does the Escaping Floats Bug.

{height: 1%}
Clearing a float container without source markup
for Gecko

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

for ie

* html .clearfix {height: 1%;}

combine

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */