CSS Hack: Targeting Internet Explorer 1
IE is the most common target for CSS hacks — each version has unique bugs (IE6's double margin, IE7's z-index issues, IE8's lack of CSS3 support).
The simplest hacks use browser-specific prefixes or syntax that only certain IE versions parse.
These hacks work without JavaScript and are lightweight for retro projects!
You might think these are too hard to remember, but don't worry — there's an easier way on the next page.
|
My background color is blue in any browser.
My background color is yellow in IE6-10.
My background color is orange in IE8+.
My background color is purple in IE6.
My background color is pink in IE6-7.
My background color is black in IE6-7.
/* Basic IE Version Targeting */
/* All IE versions (IE6-10) */
* html .element { color: red; } /* IE6 only */
*+html .element { color: green; } /* IE7 only */
.element {
color: blue; /* All browsers */
color: yellow\9; /* IE6-10 */
color: orange\0/; /* IE8+ */
_color: purple; /* IE6 only (underscore hack) */
#color: pink; /* IE6-7 only (hash hack) */
*color: black; /* IE6-7 only (hash hack) */
}
/* IE9+ & modern browsers */
:root .element { color: teal \0; }
Example: In IE6 (and possibly earlier versions), floated elements, such as this dialog box, have a 4px gap horizontally from other non-floated elements. I used '_margin-left: -4px;' to eliminate it.
|
Note: These hacks rely on CSS parser inconsistencies — they're not "standard", but they're battle-tested for legacy support.
In general, we try to avoid using CSS hacks, except in certain situations where we need to ensure backward compatibility for the sake of user experience.
|