Someone should really write a conditionally included universal CSS file to handle IE6 bugs and just be off with it. On the other hand, there are other approaches such as providing a universal readable and pleasant style just for IE6 users and hoping the clients will be happy with it.

Check the proposed style in question at Universal Internet Explorer 6 CSS | For A Beautiful Web.

All you have to do is call the following script and voila, your headaches are over:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->

Head over to the DD_belatedPNG page for downloads and more examples.

Quoting:
“The Surf Right Toolbar is really for anyone who wants to adjust the way they view content on the web to make it easier to read. This could include people with mild disabilities, the elderly, people with reading problems, cognitive problems, using dial-up, photosensitivity and so on.”

You can grab the beta, right here.

So the flames have extinguished? Read more on the subject.

<meta http-equiv="X-UA-Compatible" content="IE=7;FF=2" />

… would say that our page was tested and works on IE version 7 and Firefox version 2, for example.

Now, the problem I see here is in actual browser support for backwards-compatibility rendering. Do we really believe that once IE 10 is out, our IE=7 will still work? If you ask me, this is a recipe for failure.

Read more on the subject on alistapart.com, for some enlightening articles on the subject.

1. Reset browser styles

To start off with the right leg, I suggest you reset the styles to some sensitive defaults, so all browsers will render the page as similarly as possible. To do so, you can use one of the many suggested templates to create a reset.css file and include it before you include any other of your style sheets.

2. Add IE 5.5+ png file support

Angus Turnbull over at TwinHelix has written a nice htc script to bring png images support to IE 5.5+. To use it, simply add the following css code into your ie.css file, which you’ve previously included with IE conditional comments – you do use conditional comments, right?

img, h1, .class-with-png-background-image {
    behavior: url(../htc/iepngfix.htc);
}

I won’t go deep into explaining how this works as you can easily find more info on the author’s site. Suffice to say that you need to call the iepngfix.htc file as an ie-only dhtml behaviour attribute on the img element and/or any other element where you may want to use png background images on.
The only problem with this script that I’ve found so far, is that it won’t work with repeating background images.
Also you should make sure that the server is configured to serve .htc files correctly. If the script doesn’t work, all you need to do is to add the following line to your .htaccess file, and you should be good to go:

AddType text/x-component .htc

3. Add IE < 7 custom :hover support

Another annoying IE problem is that it doesn’t support css :hover events on elements other than links. This can be easily solved with another .htc script, this time written by Peter Nederlof and you can download it on the Whatever:hover script page.
This script is even easier to use than the png trick, because all it takes is one line in your ie-specific css file:

body { behavior:url("../htc/csshover.htc"); }

4. “Give layout” to elements

The source of most of Internet Explorer’s bugs comes from an IE-only property called layout. An element can either have layout or not, which determines how an element is rendered by the browser. Most of IE bugs can be squashed by giving layout to the offending element, which is done simply by assigning one of the following properties to that element:

position: absolute [IE 6 & 7]
float: left [IE 6 & 7]
float: right [IE 6 & 7]
display: inline-table [IE 6 & 7]
any width or height value [IE 6 & 7]
zoom [IE 6 & 7]
min-width [IE 7]
max-width [IE 7]
min-height [IE 7]
max-height [IE 7]
overflow [IE 7]

Among these, the most common way to “give layout” to an element – and thus, eliminate the bug – is to assign the following rule:

#the-buggy-element { height: 1%; }

However, if the problem persists, you might want to add a “position” to that element. This fixes the problem more often than not.

#the-buggy-element {
    position: relative;
    height: 1%;
}

An exhaustive article on having layout can be found at http://www.satzansatz.de/cssd/onhavinglayout.html.

5. Prevent the double margin bug from crumbling your layout

This one has saved me a lot of headaches, because IE 6 has a tendency to double the margins of every element, which has been floated and assigned a left/right margin. To overcome this bug, simply set display: inline on the offending element. This will magically make the bug disappear with no adverse effects on your layout.

If you’ve found these tips useful and your future IE-development experience somewhat more pleasant, I invite you to share your thoughts by commenting below.

Fortunately IE developers provided us with a neat solution to this problem with conditional comments. Just what are conditional comments? Basically they are common html comments with an extended syntax. They are completely transparent to all non-IE browsers, so they validate and are much more future-proof than hacks will ever be.

You can use conditional comments like this:

<!--[if IE 6]>
<link type="text/css" href="ie6.css" rel="stylesheet">
<![endif]-->

or like this:

<!--[if IE 6]>
<style type="text/css">
... css definitions ...
</style>
<![endif]-->

In both cases the styles will only be used from Internet Explorer version 6. Of course we can specify any version of IE we want, like this:

<!--[if lt IE 7]>
... will only run on ie less than version 7 ...
<![endif]-->

<!--[if lte IE 7]>
... will run on ie less than or equal to version 7 ...
<![endif]-->

<!--[if gte IE 7]>
... will run on every ie greater or equal to version 7 ...
<![endif]-->

… and on and on, I am sure you figured out how it works. Still, if you want more info on the subject, you can get it from the MSDN pages in the IE Developer Center.

Have fun!