CSS Hacks for IE6, IE7, IE8, IE9

Older versions of IE has been one of the biggest issues in the past. But the time demands us to move on. Still some of the css hacks are handful to know what you can technically get away with, whether it be for debugging, or showing off to your friends!

First thing first, use of conditional statements in the css. For example,

<!--[if lte IE 8]>
Make IE8 or less than IE8 happy.
<![endif]-->

We could have written “[if IE 8]” to just specifically target IE8.
Here are different types of conditional symbols. Like,

lt
less than
gt
greater than
lte
less than or equal to
gte
greater than or equal to
!
not equal to

It should be used most of the times when you have more than 2-3 lines of fixes for a particular browser. While if you have 1-2 issues in a certain browser, I would suggest you to use the following css hacks.

css-hacks-for-older-browsers

IE6 – underscore hack (_)

Example:

p {
color: red; /* all browsers, of course */
_color : orange; /* IE6 */

IE7 and Below – Asterisk symbol (*)

Example:

p {
color: red; /* all browsers, of course */
*color : yellow; /* IE7 and below */

IE8 and Below – append “\9″ to end of style (\9)

Example:

p {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */

Leave a comment