
Apply css style to only IE6 or IE7 with only 1 extra character in your CSS
When I work with CSS, I usually build pages for FF/Chrome/Safari and write workarounds (hacks) to make everything work in IE. I usually have a separate file called ie.css that contains all the overrides for IE. Well, there were couple times when I had to apply styles to IE7 or IE6 only browsers and I didn’t want to apply these hacks to IE8 or higher because these hacks are only needed for for lower versions and would break the page if I apply them to all IE version.
There are two ways to do this:
1. Target specific IE browser by putting a special character before property.
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* Shows in IE 7 and below. notice the * before the property */
_color: #999; /* shows in IE6 and below - notice the _ before the property */
}
2. Create a separate file for each browser version. This is a good solution if you find yourself having to do version specific ie hacks. Most of the time, should use the first option as much as possible and comment that it’s a IE hack in your css.
Comments (0)