CSS Tricks for IE and Firefox

When designing your website, it’s annoying that your css file can not suit any browsers even though its writen under W3C standards. These errors occurs often in IE6. In contract, Firefox, opera, safari and chrome do well on css explaination. Now, I’d like to share my experiences on css hacks. This post will help you to distinguish IE6, IE7 and Firefox.

Choose browsers for css hack

When choosing browsers to improve your css files, as many browsers can run standard css files, it would be better to pick one that can perfectly perform W3C standards. You can test your css file under this browser and then improve it to ensure all browsers work the same for you css. I sugest you test your css under this turn:

Opera->IE6->IE7

After testing css under this turn, most browsers can work perfectly for your site.

Css Hacks  distinguish IE6, IE7 and Firefox

I could come up with 2 ways to use CSS hacks or tricks: target only IE with an if statement, use special tags in your css.

1.special tags to distinguish browsers

Here is a list of special tags I know for css hack:

	IE6	IE7	Firefox
*	√	√	×
!important	×	√	√
*+html	×	√	×
_	√	×	×
*:lang(zh)	×	×	√

Special tags for IE7 has a priority like this: (*+html + !important) > !important > +html

As an example,  there is a piece of css file:

 

#bgcolor{
	background:red !important;/* Firefox and other standards browsers */
	background:blue;/* IE6 */
	}
*+html #bgcolor{
	background:green !important; /* IE7 */
	}

In IE6, the color of element with id ‘#bgcolor’ will be ‘blue’, IE7 will be green and Firefox will be red.

In addition, Firefox has its private css properties such as ‘-moz-border-radius-bottomright:5px;’ . You can get more private properties at here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

2.target only IE with an if statement

Here is a list help you to trick IE serious:

<!–[if IE]> For IE serious<![endif]–>
<!–[if IE 5.0]> only IE5.0 canimport <![endif]–>
<!–[if gt IE 5.0]>IE5.0 and IE5.5 <![endif]–>
<!–[if lt IE 6]> only IE 6 <![endif]–>
<!–[if gte IE 6]> IE6 and IE5.x serious<![endif]–>
<!–[if lte IE 7]> only IE7<![endif]–>

Surely, you can use @import for css hack. But I don’t know how to use it.

At last, I recommend you a good tool for css hack : IETester. This is a free webbrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP. You can get it here: http://www.my-debugbar.com/wiki/IETester/HomePage