IE is a headache for web developers all over the years. You never know what this browser will come up with next time. I remember those days when IE 6 was nearly 90 % of all web navigators. There was a lot of fixes annd tricks to overcome IE challenges. There was no way to avoid this if you wanted to fetch the web audience as much as possible.

Nowadays we have the following:

Statistics provided by W3Schools

So it’s obvious that there is still a necessity of IE to be supported. I this post I’m going to present a list of known and unknown IE bug fixes all the time. I will constantly update the list so stay updated!

Conditional comments

This is usual way to apply styles to Interner Explorer only (or any other particular browsers). Using conditional comments you are able to avoid unnessesary file loading if the user agent is not the one in the comments.

Consider the following code:

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

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if lt IE 7]><link href="ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if !lt IE 7]><link href="ie_only.css" rel="stylesheet" type="text/css"><!--<![endif]-->
<!--[if !IE]>--><link href="ie_only.css" rel="stylesheet" type="text/css"><!--<![endif]-->
<!--[if gt IE 6]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

Conditional comments are known to be safe-to-use mean to fix IE bugs. Comparing to all those tricks shown below they are considered to be the more standard-compatible way.

General CSS hack for IE

“*” can be used as the inline hack for IE 6+

* html {
padding:0;
}

p.header{
*margin:10px;
}

“_” can be used for IE 6

p.header{
_margin:10px;
}

html>body can be used for IE 7

html>body p{
margin:5px 0;
}

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 6 PNG Fix

In case you forgot that “nice IE behavior”, I should remind you that IE6 does not show up transparent regions of PNG images. This is why IE6 cannot recogonise the alpha filter option. And in the image area where we should have transparency we will see that ugly grey color.

So you have to come up with AlphaImageLoader analog.

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")
(this.pngSet?this.pngSet=true:(this.nodeName == "IMG"this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

The code initially provided by KomodoMedia

!Important identifier

The problem with the !important identifier that wasn’t fixed in IE 7 is the treatment of non-alphanumeric characters after the identifier. So the !important! should be used instead.

p {
margin: 10px !important!;
}

IE 6 min-height hack

Assume you all know what is the “min-height problem” of IE 6. The real headache begin when the user tries to resize the page. Should be avaoided like that:

div.box {
min-height: 300px;
height: auto !important;
height: 300px;
}

You should take into account that all those steps are extremely hacky, and strongly unrecommended. My duty is to warn you.

Further Digging

• CSS Hacks

Tags: fixes, ie, ie 6, tutorial

You can leave a response, or trackback from your own site.