解决了焦点上按钮轮廓出现在兄弟按钮后面的浮动左侧

Question

鉴于此HTML：

<div>
    <button>Test1</button>
    <button>Test2</button>
</div>

这个样式表：

button {
    border: 1px solid #EEE;
    float: left;
}

button:focus {
    outline: thin dotted;
}

SSCCE：http://jsfiddle.net/DKpGA/

在下面的jsfiddle中，如果你专注于第一个元素，则轮廓会留在下一个元素后面（单击并“拖动”第一个按钮以显示边框轮廓）。

它发生在Firefox（边缘）和IE10中。

我尝试使用z-index控制两个元素的z位置但没有成功。我可能会遗漏一些东西 Opera优雅地处理它，但Firefox和IE10拒绝这样做......

1. 如何让大纲出现在相关元素的前面，而不是在FF和IE10的后面？
2. 规范中是否有任何关于此行为的提及，或者这是供应商特定的？

屏幕截图显示FF中不受欢迎的行为：

Answer 1

z-index仅适用于非默认position的{​​{1}}。因此，通过将其设置为static，您将实现您的效果。

这是一个JSFiddle http://jsfiddle.net/DKpGA/2/

请注意，在没有relative，position:relative，top或bottom属性的情况下指定left通常不会移动您的元素并破坏布局，但{ {1}}将其从自然流中移除并将其置于其他元素的范围之外，因此请小心。