# Internet Explorer 6 hacks, ten years after

DevFeed: [Internet Explorer 6 hacks, ten years after](<https://devfeed.tech/articles/internet-explorer-6-hacks-ten-years-after-37286.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/ie6-hacks-ten-years-after/>)

Author: Stanko

Published: 2019-02-25T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Internet Explorer](<https://devfeed.tech/topics/internet-explorer.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [internet-explorer](<https://devfeed.tech/tags/internet-explorer.md>)

## AI overview

A retrospective republishes and contextualizes Internet Explorer 6 CSS hacks from ten years earlier, covering issues including box-model differences, disappearing content, unsupported sizing properties, PNG alpha transparency, and other browser-specific workarounds.

## Source excerpt

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. Calculating width and height # All browsers (but IE) are calculating element's width (and height) using the following formula: width + padding + border-width While IE is using width and 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: .element { border: 2px solid black; padding: 8px; /* this line will be read by all browsers */ width: 400px; /* but this one, due to inline comments will be skipped by IE */ width/**/:/**/380px; } Internet Explorer will skip the last line, and use 400px while everyone else will use 380px. 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. Disappearing text and images # 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: relative to the unfortunate element. To this day I don't know why this used to happen, and how position: relative fixes it. min-height and min-width # IE doesn't support these attributes, but you can use this hacky quick fix: .element { min-height: 500px; height: auto !important; height: 500px; } To be honest, I was looking at this one today, and I have no idea why and how this works. PNG Alpha transparency # To understand this hack you'll need to read about .htc scripts. There are a bunc