CSS First-Aid for IE Peekaboo Bug

That annoying IE peekaboo bug just doesn’t know when to stop. Apparently, even IE7 exhibits this bug, and it appears to be worse than its predecessor. If you happen to be pressed for time (or are lazy to search the Internets for a solution), applying a couple of stylesheet rules to the affected element should solve most peekaboo problems for both IE6 and IE7:

position: relative; /* peekaboo bug fix for IE6 */
min-width: 0; /* peekaboo bug fix for IE7 */

Take note that I said most. These two lines work for me lots of times, but then again I don’t get to encounter every known variant of the peekaboo bug. What I like about this is that it takes a few seconds to apply (hence the “First-Aid” designation in the title), and it’s perfectly valid code: no hacks performed, and it doesn’t even need conditional comments. There will be instances where one or both rules may conflict with your own rules (or they just won’t work), in which case other fixes may be more appropriate.

Note: min-width: 0; can be replaced with any other (equally non-destructive) rule that triggers hasLayout, such as zoom: 100%;.

You might also like:
  1. Standards-Friendly IE Button Width Fix
  2. An Even Better IE Button Width Fix
  3. Maximize CSS Comment Usage

35 Responses to “CSS First-Aid for IE Peekaboo Bug”


Leave a Reply