Internet Explorer 6 hacks, ten years after
Exactly ten years ago, on my my friend's blog I published a blog post about Internet Explorer 6 CSS hacks. I remembered it recently, and thought it would be really cool if I republished that same post, on it's 10th anniversary.
I added comments about the hacks from today's perspective to give you some context. Cited parts are from the original post. Younger developers may find some things unbelievable, because browsers came a long way in the last ten years :)
So here it is.
All browsers (but IE) are calculating element's width (and height) using the following formula:
width + padding + border-width
While IE is using
widthand subtracts border width and padding from it. Which actually makes sense. There are lot of different solutions to normalize this, and this is the one I'm using:
Internet Explorer will skip the last line (Note that my syntax highlighter didn't highlight
380pxas well.) , and use
400pxwhile everyone else will use
This was before
box-sizing was supported, and only browser using
border-box was IE while other browsers were using
content-box. Today, I think literally everyone are using
border-box in their CSS reset.
This is one of the weirdest IE bugs. I never found out why it is happening. Randomly content will disappear, poof, and it is gone. Luckily, just add
position: relativeto the unfortunate element.
To this day I don't know why this used to happen, and how
position: relative fixes it.
IE doesn't support these attributes, but you can use this hacky quick fix:
To be honest, I was looking at this one today, and I have no idea why and how this works.
To understand this hack you'll need to read about .htc scripts.
There are a bunch of scripts for this problem, and after trying a lot of them, I have been using TwinHelix script (Page is still online <3) for quite some time.
Now I'm using this one (Unfortunately the link is dead.) It is enough to include it on you page. Only drawback is that it doesn't support background images. SO you'll need to stick with jpegs and gifs for backgrounds.
UPDATE: try this solution as well, it seems the best so far.
Back then alpha transparency wasn't working in IE (Nor did CSS border radius, shadows, gradiends, transforms...) .
Here you can find a script which solves this problem. You'll need to include it on the page, and add this to your CSS file:
If you can't find your way around it, the page has a detailed explanation.
IE6 did not support
:hover behavior on all elements. But only on elements like links and buttons.
In some cases, you would just end up with double margins on elements, with no particular reason.
When IE6 double your margins on an element, just apply
display: inlineto the element.
This is not the best hack, because it will influence your layout. But it was either that or having double margins.
Hopefully you enjoyed this little time travel with me. Although it was hard browser to develop for, reading my old post have put a smile on my face. It is a great reminder how lucky we are today - how much browsers evolved and how good today's frontend tooling is.