Pure CSS Remove button and dotted line when a link is clicked

The focus of this effect is that I accidentally discovered a bug in IE, which may lead to the loss of the dotted line when a button or link is clicked in a specific environment. Other browsers are relatively simple. Browsers supporting css2 can solve this problem by setting outline. The FF button tag is specially processed by private attributes, and the demo is tested in multiple mainstream browsers.

 

 

<Style type = "text/CSS">
. Wrap {position: relative ;}
. Btns {ZOOM: 1 ;}
. Btns * {outline: 0; ZOOM: 1; Background: # f2f2f2 ;}
. Btns button:-moz-focus-inner {border-color: transparent! Important ;}
</Style>
<Div class = "Wrap">
<Div class = "btns">
<Button type = "button"> OK </button> <button type = "button"> cancel </button>
<A href = "#"> OK </a> <a href = "#"> cancel </a>
</Div>
</Div>

 

Result

 

 

OK CancelAre you sure you want to cancel