Common IE6 Bug Workarounds

Posted by: Jered | Posted on: November 27th, 2009 | 2 Comments

Much as we hate it, Internet Explorer 6 still has between 10% and 23% of the browser market share, and some of our clients absolutely need to support it. Here are a few quick tips for working around some of the more annoying IE6 “features”.

• <--[if IE comments: IE recognizes macros inside HTML comments that cause it to interpret the contents as part of the document. You can use these macros to include a stylesheet just for old versions of IE:

• Tranparent PNG images: IE6 and IE5.5 show PNGs with alpha as having a solid gray background instead of transparency. To hack around this, you can use a Microsoft extension called AlphaImageLoader. Instead of setting a background-image in your CSS, use the filter property:

  #elt-with-bg {
      width: 100px;
      height: 100px; /*set size explicitly or image may get crazy size*/
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/thepng.png', sizingMethod='crop');
  }
  

  Replace <img> PNGs with a <span> having the filter property.

  There's no way to tile a background with AlphaImageLoader, but you can set sizingMethod='scale' to stretch an image. Often for simple drop shadows styled repeat-y or repeat-x, stretching works fine. sizingMethod='crop' is faster when you don't need to tile an image.

  You can use JavaScript to rewrite your document to use AlphaImageLoader dynamically. We like this jQuery pngFix plugin.

• min-width and max-width: IE6 and IE5.5 don't support CSS min-width, however you can use a Microsoft extension to include JavaScript expressions in your IE6 CSS.

  #menubar {
      /* width: 100% */
      /* min-width: 980px; */
      width: expression(document.body.clientWidth < 980 ? "980px" : "100%");
  }
  

• min-height: IE6 doesn't support min-height, but you can emulate it with the following CSS hack:

  #content {
       /* min-height: 350px; */
       height: auto !important;
       height: 350px;
  }
  

• Empty <div>s have height: IE6 treats empty <div>s as if they contain a line of text, so gives them a height. To avoid this, style empty <div>s:

  div.empty {
      line-height: 0px;
      font-size: 0px;
  }
  

• DOCTYPE switching: IE6 added "Quirks mode" which switches back to the IE5.5 rendering engine if you don't include a modern DOCTYPE in your (X)HTML. Now all modern browsers dumb down their rendering in a similar way, so be sure to include the correct DOCTYPE unless you're targeting 10+ year old browsers!

• Percentage layout issues: IE6 has lots of problems with percentage widths in CSS, but the most glaring occur when you try to make a layout that adds up to 100%. If you're not careful, you may find your sites' columns dancing around when you resize your window!

  Suppose you put two width:50% <div>s, A and B next to each other floated left inside a width:100% parent. If the parent's width is a multiple of 2 pixels, A and B will be side by side. But if the parent's width is odd, IE6 will place B beneath A!

  The issue is IE6 does layout on a 1-pixel grid, and rounds widths like 2.5px to 3px, so it will happily try to stuff two width 3px (2.5px) children into a width 5px parent and overflow the parent. However, precision issues such as this are not unique to IE6. Solutions: choose widths that add to less than 100% and include copious padding; use JavaScript to reflow your site dynamically (ick); or use a pixel-based layout. Pixel-based layouts are still the easiest way to ensure your site looks watertight across a wide range of browsers.