Firefox's-moz-focus-inner

In Firefox, ::-moz-focus-outer and ::-moz-focus-inner pseudo-elements are primarily for button-type elements, including button type, reset type, and submit type.

The button uses line height to center the text vertically, but the text in Firefox is lower and there is a dashed box in the middle of the click. Firefox's button system style is as follows:

{ Border: 1px dotted transparent; padding: 0 2px;} Button:-moz-focusring::-moz-focus-inner, input[type= "reset"]:-moz-focusring::-moz-focus-inner, input[type= " Button "]:-moz-focusring::-moz-focus-inner,
{ Border-color: buttontext;}

Solution:

Button::-moz-focus-inner, input[type= "reset"]::-moz-focus-inner, input[type= "button"]::-moz-focus-inner,
{ Border:/* go to the dotted box */; padding:0;}

In fact, the outline settings for the button need to be set up to achieve the same style effect as all browsers:

{    outline:none;    /* For IE */}  {    border-color: transparent;    /* For Mozilla */

Firefox's-moz-focus-inner