The IE7 + Clearfix headache

  • July 31st, 2006

Having caught the news that Microsoft will releasing its next browser – Internet Explorer 7 – via a high priority update for all Windows users.

I came to the realization that every site that I had ever touched was due for a quick debug using IE7 via Parallels. Fortunately, many of the examples pages that I looked at through IE7 rendered as they should with the exception of a single site – 5thirtyone.com. I had experimented with clearing floats using the Clearfix CSS hack (read more about the hack at Position is Everything).

The two – IE7 & Clearfix – don’t play nice together.

Update: The fix from 456 Berea St.

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */