CSS Hacks for Internet Explorer
Good web design is more than just a good looking web site, it’s also making sure that the web site design is displayed as intended no matter which browser a visitor to the web site uses.
Internet Explorer (IE) has always had issues with displaying CSS styles correctly. It became necessary for web designers to develop hacks to ensure that their designs looked as intended in Internet Explorer as well as other browsers.
Types of Hacks
There are various hacks out there for Internet Explorer browsers. Here’s a quick list of what you may have used, or what you may have seen:
- html > body
- * html
- head:first-child + body
- head+body
- body>element
The problem with hacks is that when the browser evolves, the hack may become redundant and even cause a web page to display incorrectly.
The Solution by IE
The folks at IE are now asking for all web designers, developers and webmasters to stop using CSS hacks. Instead, they suggest using conditional comments to target or bypass Internet Explorer’s quirks with CSS.
Using Conditional Comments
Scenario:
Lets say that you want the left margin to be 20px in IE and 40px in all other browsers.
Step 1:
Define your style block as you would for all browsers either in an external stylesheet or between the <head> tags in your HTML document.
For example:
#content {
margin-left: 40px;
}
Step 2:
Create a new style block for the conditional comment for IE browsers. This style block should be between the <head> tags in your HTML document, underneath the link to your external stylesheet or underneath the style block as defined in Step 1.
<!--[if IE]>
<style>
#content {
margin-left: 20px;
}
</style>
<![endif]-->
Optional:
To target a specific version of Internet Explorer, add the version number after “IE” in the conditional comment:
<!--[if IE 5]>
...
<![endif]-->
To target all IE versions prior to IE 7, add “lt” between “if” and “IE 7″ in the conditional comment:
<!--[if lt IE 7]>
...
<![endif]-->
Keep your HTML clean by separating HTML and CSS. Use the conditional comment to link to an external stylesheet that contains styles for Internet Explorer:
<!--[if lt IE 7]>
<link rel="stylesheet" href="iestyles.css" type="text/css" />
<![endif]-->
More info here
