CSS Hacks for Internet Explorer


Here’s are the samples of CSS Hack for Internet Explorer from IE6 to IE9 version.

body {
background: #ff0000;      /* for all browser - display "red" */
background: #0000ff\9;    /* for IE9 - display "blue" */
background: #00cc00\ 0/;  /* for IE8 - display "green" */
background: *#ff9900;     /* for IE7 - display "orange" */
background: _#ff66ff;     /* for IE6 - display "pink" */
}

Note: On IE8 css line: there should be no space between
"backslash" and "zero", just eliminate the "space" between
them. Because when I put the code itself - the "backslash"
and "zero" are not displayed when I post this article,

Internet Explorer 9 & below

The key to targeting Internet Explorer 9 and below, with a hack is to append “\9” (backslash + nine) to end of your style, For example:

body {
background: #ff0000;      /* for all browser - display "red" */
background: #0000ff\9;    /* for IE9 - display "blue" */
}

Internet Explorer 8 & below

The key to targeting Internet Explorer 8 and below, with a hack is to append “/” (backslash + zero + slash) to end of your style, For example:

body {
background: #ff0000;      /* for all browser - display "red" */
background: #00cc00\ 0/;  /* for IE8 - display "green" */
}

Note: On IE8 css line: there should be no space between
"backslash" and "zero", just eliminate the "space" between
them. Because when I put the code itself - the "backslash"
and "zero" are not displayed when I post this article,

Internet Explorer 7 & below

The key to targeting Internet Explorer 7 and below, just add “*” (asterisk) at the beginning of your style, For example:

body {
background: #ff0000;      /* for all browser - display "red" */
background: *#ff9900;     /* for IE7 - display "orange" */
}

Internet Explorer 6 & below

The key to targeting Internet Explorer 6 and below, just add “_” (underscore) at the beginning of your style, For example:

body {
background: #ff0000;      /* for all browser - display "red" */
background: _#ff66ff;     /* for IE6 - display "pink" */
}

You can also apply this inline (example: <div style="..."> ... </div>).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s