What browser bugs do you design around?

I am interested to know what browser bugs people design around these days. Do you assume , for example:

  • The expanding container bug.
  • The box model bug.
  • The double float margin bug.
  • The IE transparent PNG issue.

Obviously some of these bugs have a fairly significant impact on what we can do. I’d be interested to know how people approach these issues and what level of degradation is considered acceptable.

The question is really what browser support do you want? If you are supporting IE6 then you need to do something about most of the above.

  • The expanding container bug.

If you are talking about the fact that IE6 will stretch a container if its children are too wide then the solution is simply to make sure that you don’t overstate the dimensions (as you should be doing by default anyway). If everything adds up correctly this will not be an issue in a fixed layout. In a fluid layout you can use overflow:hidden to hide the excess if it’s an issue.

  • The box model bug.

Only needed if you want to support ie5 and 5.5… If so then just don’t define dimensions at the same time as specifying borders and padding (or use a hack to supply different dimensions to ie5.x).

  • The double float margin bug.

This one is easy just add display:inline to any floats where their side edge is adjacent to the containing block and where the floated element has a margin defined on that side. It only affects ie6 but the fix is so easy you may as well add it.

  • The IE transparent PNG issue

Avoid transparency in IE6 if at all possible or try and use png8 transparent images for IE6 instead. The png fixes are buggy, cause loads of link problems and slow the page right down.

If its only one or two images then just use the alpha image loader filter if this is critical to the design but if you have loads of images then think about a different version for IE6 if you want to support it. I try and use png8 images which give full transparency in good browsers and index transparency in IE6 but fireworks is the only program that does this natively although other png optimisation programs do give similar results. Obviously png32 gives much better results in modern browsers so does depend on the image etc.