Internet Explorer CSS Hacks

As frustrating as it can be to get sites to work properly in IE6 and IE7 along with Firefox and Safari, there is a couple of nice hacks we can use in the stylesheet to make getting our markup browser compatible.

Using an asterisk (*) before the style attribute will cause both IE6 and IE7 to render the styles but not any other browsers.

Using an underscore (_) before the attribute will cause the style only to be rendered in IE6. It is therefore important to remember to include your IE6 hack after the general, asterisk IE hack.

Example:

div .class-name {
padding: 10px; //all browsers
*padding: 10px; //IE6 and IE7
_padding: 10px; //IE6 only
}

If your markup is coded and styled properly, I find that Safari and Firefox are almost always identical in the way the page is rendered. It is therefore usually easier to get things working in Safari or Firefox first and then apply these hacks as needed to get the page rendering properly in IE6 and IE7.

Comments (0)
+ –