Fixing IE's Peekaboo Bug

The bare nekkid bug in all its glory

You must view this page in IE to see the bug in action. It is a truly ugly bug and its cause and its fixes are not obvious. The bug is fully discussed at /*Position Is Everything*/, in Big John's article Peek-a-boo IE6 Bug.

The test case is lifted directly from John's, and while he goes to great lengths to define and explain the bug, my only purpose is to demonstrate the fixes. Do not depend on this demo for anything other than seeing the fixes in action.


 Float 

 test link 
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link

Remove BG Color from the parent

This particular fix is not especially useful, for obvious reasons. Due to its simplicity, it is not demonstrated.

Give a positional reference

Use {position: relative;} for the float and its parent. There are possible problems, so test. This “cure” fixes many ills with IE. It also creates problems from time to time. What the hey, it’s IE.

This seems to be the best of the fixes. The others seem to cause some kind of jog as one or another link is hovered. The jog seems related to about a three pixel padding—either added to one side or subtracted from the other. It may be yet another float model bug. See The IE Three Pixel Text-Jog.


 Float 

 test link 
The float and its container are position: relative;. This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link

Use line-height property to fix peekaboo bug

Use a line-height value in the parent container. Any value will do. Be aware of the consequence of the cascade.


 Float 

 test link 
The container has line-height: 1.2; This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link

Apply the Holly Hack to fix the peekaboo bug

This fix and the next are based on triggering hasLayout on the parent container.

Simply giving the parent container a dimension will fix the bug. That can cause other problems, so we use the Holly hack. Since only IE/Win sees it, and since IE/Win is buggy about height, it all works out. :)


 Float 

 test link 
Holly hack. This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link

Trigger haslayout with the tripswitch

Giving the parent container the style, {display: inline-block:} will do the job. Then the element is given the value {display: block;} to negate the inline-block without unsetting hasLayout. This, along with the Holly hack fix, implies that triggering hasLayout in the parent is sufficient, regardless of the method (not fully tested). See Claire’s little discovery, the hasLayout tripswitch for a more thorough explanation.


 Float 

 test link 
Container is switched to having layout by the tripswitch. This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link

⇐ home

⇑ Return to top of page