Table of Contents
Introduction
Okay, so Internet Explorer 7 is a vast improvement over its predecessor, but it’s certainly not perfect. Already we’re seeing pieces of code that should work and don’t, differences between IE6 and IE7, and browsers that are more to specifications. That’s why hacks are unfortunately still necessary.
Star Hack
I already hear you screaming “What?!? Microsoft fixed the Star Hack in IE7!”
For those of you who don’t know, the Star Hack works like this:
CSS:
#main {
width: 130px;
}
* html #main {
width: 150px;
}
In most browsers, the element with the id of #main would be 130 pixels wide. Internet Explorer’s parse tree (the hierarchy of the tags of an HTML document) was written wrong in that there is an element that is the parent of <html> (there is no such element; <html> should be the root element). Thus, the width of #main is 150 pixels in Internet Explorer.
According to Microsoft, this bug was corrected in Internet Explorer 7, and it was … in HTML, but not in XML. If you render your code as XML, the Star Hack still works perfectly. (If you want to learn how to render your code as XML, check out my XHTML tutorial, and if you want to make it work in almost all browsers, check out my tutorial about using XML in IE and Safari.)
This is a good hack to use if you want to affect IE7 and earlier. If you just want to affect IE7 and not IE6 or earlier, the Nomolos Attribute Selector Hack would be a better choice. Also, the XML parser in Internet Explorer is a bit slower than its HTML parser, and it doesn’t like any invalid code, so if you’re concerned with speed or if you don’t feel like validating your site, you also may wish to use the Nomolos Attribute Selector Hack instead.
Nomolos Attribute Selector Hack (NASH)
This hack, discovered by my friend Phil, is even easier.
NOTE (2009-05-29): This hack is for IE7 only; IE8 is not susceptible to it.
XHTML:
<div class="main"></div>
CSS:
div.main {
/* General stuff goes here */
}
div[className=main] {
/* IE7-only stuff goes here */
}
This is caused by the interrelationship between JavaScript functions and CSS properties, as well as the new support for attribute selectors available in IE7. Other browsers allow for the use of these selectors as well, but className is the name of the JavaScript attribute rather than XHTML/HTML attribute. For some reason, though, Internet Explorer 7 perceives them as the same.
As mentioned earlier, this hack applies to IE7 only and not earlier versions of Internet Explorer.
Another limitation to this hack is that it sometimes does not work in conjunction with other styles separated from it by a comma. However, it does alleviate much of the half-IE6-half-standards syndrome that IE7 seems to be afflicted with.
You can find the original article on this hack at Phil’s website.
Other IE7 Hacks
The preceding are hacks I either discovered or received permission to reprint. Here are some more:
Thanks for reading this article! If you have any feedback, please contact me.