焦点变化扰乱了Chrome和IE中的UI

Question

我正在尝试重新创建我在工作中遇到的问题。它大致可以翻译如下。 这是代码。

<button style="margin:20px 0;">Click this button first and press tab </button>
<div class="div2"> 
</div>
<div class="div1">
    <span>ABCDEFGHIJKLMNOPQRST</span>
    <button >moved out </button>
</div>

.div1
{
    width:200px;
    overflow: hidden;
    background-color:#ff0;
    margin-left:50px;
}
div button
{

    width:50px;
    margin-left:180px;

}
.div2
{
    position:fixed;
    height:100%;
    width:50px;
    background-color:#f00;
}

请使用此方法更好地澄清Chrome和IE中的jsfiddle。

问题是 - 如果我们按下第一个按钮并按Tab键，焦点将移动到第二个按钮。与此同时，第二个按钮从部分隐藏状态出现并推动容器div的内容，这使UI变形。

实际上行为应该是按钮应该仍然处于隐藏状态并且不应该推动div。除了编写JS以再次推回div之外，还有一种简单的方法来处理这个问题。