Mouseover a button can make container expand in IE

This is a strange one and I think most of the blame can be put on IE.

If you place a jQuery UI button inside an element that has overflow-x set to auto and has some overflow (i.e. the scrollbar is visible) then moving the mouse over the button will cause that container element to get bigger (but the scrollbar will stay put).

The same effect can also be achieved by clicking on an element (inside the scrollable element) that is a child of an element with a class of ui-widget.

In the second case (clicking on the child of a ui-widget) I have narrowed it down to this rule in the jQuery UI CSS:

.ui-widget :active { outline: none; }

It appears that manipulating the outline property is triggering a bug in the IE internal size calculations. I have, so far, been unable to narrow down the button hover scenario. I can remove the CSS and the problem is still there so it would appear to be something being done to it in the JavaScript.

This is an Internet Explorer issue only.

A JSFiddle demonstrating this is here: http://jsfiddle.net/IvanTheBearable/fP7vc/