Ever run into a really annoying, impossible browser bug which it seems that no one on the web has ever heard of? Without even going into IE6 or hasLayout issues, here are some doozies we've run across during our projects, and the solutions we found:

IE7 applies CSS rules to HTML comments
It is actually well-documented that IE treats comment nodes as children in some situations. However, this can still create some difficult-to-diagnose "disappearing" :first-child and adjacent sibling CSS rules. Check out these useful links:
http://archivist.incutio.com/viewlist/css-discuss/73965
http://robertnyman.com/2009/02/04/how-to-solve-first-child-css-bug-in-ie-7/

jQuery’s mouseleave event in IE7
Recently I was having trouble with the mouseleave event handler for a simple rollover menu, where the event was being dispatched while the mouse was apparently still inside the element.
The basic structure of the menu was
    <div id="myDiv">
      <ul>
         <li>Option</li>
         <li>Option</li>
         <li>Option</li>
      </ul>
    </div>

While mousing over the lower list elements, the mouseleave event would be dispatched on myDiv. At first I suspected the typical box size or hasLayout issues, but when none of the standard fixes for that worked, I accidentally found a solution: While testing the rendered dimensions of the box by setting a background image on myDiv, I discovered that the mouseleave event was triggered at the expected positions. The final solution was to apply a repeated transparent background image to myDiv for IE.

IE6 not respecting short div heights
Okay, I said I wouldn’t go into IE6, but this one deserves a mention. We’ve run into this on various occasions when using empty div’s with a background image to add top and bottom rounded corners to a module, like in this example:
    <div>
        <div></div>
        <div><!-- content goes here --></div>
        <div></div>
    </div>

Sometimes in IE6 one of the background-only div’s wouldn’t respect the pixel height set in CSS, causing gaps (show in this image by the red background).

The issue seems to be related to positioning context with font size and line-height factored in. We’ve found various fixes:
1. Set font size to 1px  or 0
2. Set overflow:hidden on the div
3. Place an empty HTML comment in the div. This one wins for convolutedness.

The Microsoft alpha opacity filter causes the page to render sluggishly
We’ve found that applying the opacity filter to any single element on the page negatively impacted the overall performance of page rendering, scrolling, and image-sprite rollovers. It is faster to use transparent PNGs where possible.

Firefox 2 bug with display: -moz-inline-stack
When using this to replace display: inline-block for Firefox 2, I found that inline child nodes were collapsing on top of child text nodes like so:
    <ul>
        <li style="display:-moz-inline-stack;border-right:1px solid gray;">Name: <a href="#">John Doe</a></li>
        <li style="display:-moz-inline-stack">Some text</li>
    </ul>
Displayed as

 After much trial and error, wrapping the text nodes in a <span> fixed the issue:

    <ul>
        <li style="display:-moz-inline-stack;border-right:1px solid gray;">

            <span>Name: <a href="#">John Doe</a><span /></span>

        </li>
        <li style="display:-moz-inline-stack">Some text</li>
    </ul>
Which displays as expected:

One tab’s contents in IE 8 RC were affected by the contents in another tab
We’ll give ‘em a freebie since it wasn’t the final release, but this has got to be the most amazing bug I have ever seen. This truly happened although the details were lost in the annals of weirdness...

@author Heidi Hunter is wearing her Senior Application Developer hat for this post. We are always looking for talented web developers to challenge her to who can find (and solve!) the craziest browser behavior.