IE CSS Hacks - CodeProject

A Technical Blog article. View original blog here.[^]

Internet Explorer...

It doesn't matter if it's IE 6, IE 7 or IE 8, they all suck.
Even though IE 8 has made some progress concerning CSS issue, IE 7 and obviously IE 6 are the worst browsers.

With CSS compatibility issues from here to Bill's office it takes too much work to make one CSS file fit all. That's why I thought of a small hack that I make in every HTML / XSLT / ASPX document I'm working with.

At the body tag of each page, I insert a small HTML if:

<!--[if IE 6]>
<body class="ie6">
<![endif]-->

<!--[if IE 7]>
<body class="ie7">
<![endif]-->

<!--[if IE 8]>
<body class="ie8">
<![endif]-->

After placing that, you can easily create inside your general CSS file an inherited styling such as:

body 
    { margin<span class="code-none">: 0 0 0 0<span class="code-none">; <span class="code-none">}
body.ie6 
    <span class="code-none">{ margin<span class="code-none">: 0 5px 0 0<span class="code-none">; <span class="code-none">}
body.ie7 
    <span class="code-none">{ margin<span class="code-none">: 0 0 5px 0<span class="code-none">; <span class="code-none">}
body.ie8 
    <span class="code-none">{ margin<span class="code-none">: 0 0 0 5px<span class="code-none">; <span class="code-none">}</span></span></span></span></span></span></span></span></

This is the easiest way for me to work with IE 6 and IE 7 (and sometimes IE 8). There is another way to make style compatible with IE browsers which involves creating a different CSS file for every IE:

<link rel="stylesheet" type="text/css" href="general.css" />

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

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

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