鉴于此 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 (edge) 和 IE10 中。
我尝试使用 z-index 来控制两个元素的 z 位置,但没有成功。我可能会遗漏一些东西。
Opera 优雅地处理它,但 Firefox 和 IE10 拒绝这样做......
- 对于 FF 和 IE10,如何使轮廓出现在相关元素的前面而不是下一个元素的后面?
- 规范中是否提到了这种行为,或者这是特定于供应商的?
显示 FF 中不良行为的屏幕截图: