CSS "outline" different behavior behavior on Webkit & Gecko

Solution 1:

I had the same issue, so I swapped it from using outline to use a box-shadow:

box-shadow: 0px 0px 0px 1px #FFF;

instead of

outline:1px #dcdcdc solid;

Solution 2:

This inconsistent behavior of Gecko is well-known and quite adequately documented, although strangely not at MDN but at the SitePoint Reference:

Firefox up to and including version 3.5 will draw the outline outline around the content of an element that has overflowed its boundaries rather than around the element’s actual set dimensions.

This continues to affect all versions of Firefox. I don't see a viable workaround for it at the moment, other than to remove your absolutely-positioned div from its parent and place it relative to... something else.