IE 6 actually had the best CSS support of any browser when it first
came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still
haunt us to this day. I still get comments from people who roundly reject any technique
that doesn’t work in IE 6. While I generally refuse to pander to IE 6’s
limitations, I still feel it is important to make things look right in
it whenever possible. Here are that major bugs in IE that’ll get you
every time:
The Box Model
This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:
<code class="css"><span class="keyword">div</span><span class="id">#box</span> <span class="rules">{<br /> <span class="keyword">width</span>:<span class="value"> 100px</span>;<br /> <span class="keyword">border</span>:<span class="value"> 2px solid black</span>;<br /> <span class="keyword">padding</span>:<span class="value"> 10px</span>;<br />}</span></code></pre>
<p>IE 6 will calculate the width of the box to be <strong>100px.</strong><br />
Modern browsers will calculate the width of the box to be <strong>124px</strong>.</p>
<p>This kind of discrepancy can cause HUGE layout problems. I even
think the IE version makes a little bit more sense logically, but that
is not how the spec was written. IE 6 can actually get it right <strong>if you are in standards-compliant mode</strong>, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.</p>
<p>I generally work around this issue by just not using padding on
boxes I am using for layout. If that box has some text inside it in a
<p> element, I’ll apply the padding it needs directly to that p
element. Just side-steps the issue, but it works.</p>
<p> </p>
<h3>The Double Margin Bug</h3>
<p>Using our box example from above, let’s say we need that floated to the right:</p>
<pre><code class="css"><span class="keyword">div</span><span class="id">#box</span> <span class="rules">{<br /> <span class="keyword">float</span>:<span class="value"> right</span>;<br /> <span class="keyword">margin-right</span>:<span class="value"> 20px</span>;<br />}</span></code>IE 6 will double the 20px to 40px. Again, causing
potentially huge layout borks. The commonly thrown-around “fix” for
this is to add “display: inline;” to the div. I’m not sure how this
“fix” got so much traction, but its a bit impractical. We can’t set
static widths on inline elements, now can we?
I also like to side-step this bug whenever possible. If you really
need to push that box away from the right side of it’s parent element,
you can likely do so by adding padding to the parent element, which is
more likely to keep your grid consistent anyway. Also don’t forget
about padding. This bug does not affect padding, so you can offen get
away with adding padding to the side you need an achieve the same
result.
No Min Widths / Min Height
Setting min-width and min-height on elements is such a natural and
logical thing that it makes me tear up sometimes thinking I can’t count
on them. IE 6 doesn’t just get it wrong, it just completely ignores
them. Min-height is incredibly useful for something like a footer. Say
your footer needs to be at least 100px tall because you are
using a background image down there, but you don’t want to set a static
height because you want it to grow nicely if, say, the text size is
bumped up significantly. Min-height is perfect for this, but using it
alone will get you no height whatsoever from IE 6. In a bizarre twist
of luck, IE 6 treats the regular height property like modern browsers
treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.
Stepdown
Normally when floating objects you can count on them lining up
vertically until they break. That is, you could if you weren’t using IE
6. IE 6 appends a line break effect after each floated block element
which will cause “stepdown”. The fix here is to make sure the
line-height in the parent element is set to zero (0), or that the
elements being floated are inline elements. More on preventing stepdown here.
No Hover States
Most modern browsers support hover states on just about any element,
but not IE 6. IE 6 only support the hover pseudo-class on anchor
(<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.
No Alpha Transparent PNG Support
Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes
for this. Do remember that regular non-alpha transparent PNG files work
fine without any fix in IE 6, and are often better than their GIF
sisters.
*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!
So…
All these bugs are either fixable or side-steppable, but they will
get ya if you don’t do your testing. My general philosophy is: design
with the most modern techniques possible, but then just make sure it
ain’t busted in older ones.
