Internet Explorer 6 has been available since 2001, so it’s no wonder that it is problematic to develop for when one compares it to Firefox, Chrome, or Safari. There have been two new versions released since then (with IE9 around the corner), but due to the unfortunate popularity of ActiveX for companies’ internal applications, many people still rely on this ancient browser.
Here are some common IE6 bugs and fixes every UI developer should know:
Double Margin Bug
A well-known IE6 problem which occurs when one adds a (positive or negative) margin to a block-level element which is floating in the same direction.
On the left you see how it renders on a normal browser, and on the right you see IE6’s rendering of the same content.
display: inline to the floated element’s style, and IE6 will render it correctly. Well, almost always…but we’ll cover that another time.
Minimum Height Bug
If you write semantic markup you shouldn’t run into this often, but many developers eventually see this when creating elements with no content (say, just to use an element for its background-image):
IE displays this 4-pixel-tall element as if there is a line of text inside.
Since the element has been sized to the line-height of the element, we can fix this bug by setting
font-size to 0.
3px Margin Bug
IE6 (even in standards-compliant mode) will add a three pixel margin to the opposite direction of the float property, pushing text or elements over by those three pixels. This can result in a few different issues, such as the following (again, with a standards-compliant browser on the left, and IE6 on the right):
Here you’re seeing the three pixel space pushing the first line of text over and out of alignment.
We can fix this by adding a negative three pixel margin to the offending float, reducing its size.