The IE7 + Clearfix headache

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 */

Discuss - 4 Comments

  1. Bruce says:
    July 31, 2006 at 11:04 pm

    Salvation may be structural and/or presentational.

    Structural in the form of IE conditional statements. I use <!–[if lte IE 6]>element<![endif]–> to target IE6 and below.

    As for presentational, testing IE7 confirms it appreciates the !important rule, so you can use this to feed IE6 or less one thing (e.g. display: none;) and IE7 another (e.g. display: inline !important;).

  2. JulesLt says:
    August 1, 2006 at 11:41 pm

    Can you clarify what the problem is?
    Is the issue that the Clearfix hack has stopped working but that IE7 is now handling floats as per the W3C spec, or is the issue that the hack doesn’t work and IE7 still display right either?

    (I’m just very aware a lot of our customers are going to be hit by that auto-update – I’m also aware that IE7 should do CSS a LOT better).

  3. Derek says:
    August 1, 2006 at 11:48 pm

    Check out this read on 456th Berea Street. The fix is updated in th post.

    The problem was IE7’s lack of support for the :after pseudo-element (among others).

  4. Marc Watts says:
    June 27, 2010 at 3:13 am

    The best way to use a clearfix can be found at best clearfix ever. It doesn’t use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.

Explore