Workaround to the button outline on focus appearing behind the sibling button with float left
问题 Given this HTML: <div> <button>Test1</button> <button>Test2</button> </div> And this stylesheet: button { border: 1px solid #EEE; float: left; } button:focus { outline: thin dotted; } SSCCE: http://jsfiddle.net/DKpGA/ In the following jsfiddle the outline stays behind the next element if you focus on the first one (click and "drag" the first button to show just the bordered outline). It happens in Firefox (edge) and IE10. I tried to use z-index to control the z position of both element