解决焦点按钮轮廓出现在左浮动同级按钮后面的问题

给定这个 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/ http://jsfiddle.net/DKpGA/

在下面的 jsfiddle 中，如果您关注第一个元素，则轮廓将保留在下一个元素后面（单击并“拖动”第一个按钮以仅显示带边框的轮廓）。

它发生在 Firefox (edge) 和 IE10 中。

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

1. 对于 FF 和 IE10，如何使轮廓出现在相关元素的前面而不是下一个元素的后面？
2. 规范中是否提到了有关此行为的内容，或者这是供应商特定的？

Screenshot showing the undesired behavior in FF:

z-index只适用于position这不是默认的static。所以通过将其设置为relative，你就会达到你的效果。

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

请注意，指定position:relative没有top,bottom,left, or right但是，属性通常不会移动您的元素并破坏布局absolute将其从自然流中移除并将其置于其他元素的范围之外，因此请小心使用。