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 */
3 Comments
Quote
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;).
Quote
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).
Quote
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).
Incoming Links
Leave a Reply