Skip links
Main content

CSS Rendering problems in IE8? Fix your conditional comments!

Friday 03 April 2009 17:29

Are your existing websites incorrectly rendered by IE8? Do you have a hard time getting IE8 to render your CSS correctly? The core problem may be incorrect usage of conditional comments... Ofcourse, a fix is available in this article!

By Peter Slagter

Today, I talked to some friends & colleague front-end developers, who had trouble with the way IE8 renders their existing websites and websites under development. We all know that developing for IE7 (and lower versions) can be a pain. Using conditional comments is a commonly used method to fix IE proprietary bugs. Please note that the point of this article is not to discuss the usage of conditional comments. My opinion on this comes close to what Jens Meiert said about this subject.

Conditional comments are conditional statements interpreted by IE only. They first appeared in IE5 and are supported through at least IE8. An example of a conditional comment:

In the above example, the conditional comment is interpreted only by IE, which loads the ie.css file with IE-specific fixes. The idea is simple and effective. So what's any of this got to do with IE8 rendering problems?

"Fix" IE8 rendering

The most common way the conditional comments were used when IE7 was the latest IE version, was as following:

    < link rel='stylesheet' type='text/css' href='ie.css'/>

The idea was to return a CSS-file for all versions of IE to fix the most common version-wide IE bugs, and another CSS-file for IE6 and lower. Since IE8 supports conditional comments, the first comment in the above example affects IE8 as well.

IE8 renders CSS2.1 fine, and doesn't behave nearly as buggy as the previous versions. This means that the fixes in your ie.css probably conflict with IE8's rendering. The solution is to change the first conditional comment into the following:

You'll see that most of the rendering problems in IE8 will disappear. Being aware of this could save you time and prevents you ending up with adding a meta-tag to make IE8 render in IE7 compatability mode. Have fun developing!

« Back

Reactions on "CSS Rendering problems in IE8? Fix your conditional comments!"

No posts found

Log in to comment on news articles.