Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div id="wrapperWithScroll">
<div id="wideDiv"></div>

<div id="widgetDiv" class="ui-widget">
<p>This is a &lt;div&gt; with a class of ui-widget. Try clicking on this text a few times. Notice how the red box gets taller (but its scrollbar doesn't move with it).</p>
</div>
<p>Now try moving the mouse over this button. Each time the mouse moves in or out of the button the red box will get taller.</p>
<button id="jquiButton">A jQUI button</button>
</div>
<div id="footer">
    <p>In the first case (clicking on the child of a ui-widget) I have narrowed it down to this rule in the jQuery UI CSS:</p>
<pre>.ui-widget :active { outline: none; }</pre>
<p>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.
</p>
</div>

CSS

#wrapperWithScroll {
    width: 500px;
    border: 1px solid red;
    overflow-x: auto;
    padding: 10px;
}

#wideDiv {
    width: 600px;
    height: 1px;
}

#widgetDiv {
    width: 488px;
    border: 1px solid blue;
    padding: 5px;
    margin-bottom: 20px;
}
p {
    margin: 0.5em 0;
}

JavaScript

$( "#jquiButton" ).button();