Firefox的-moz-focus-inner

Posted 2020-08-16 Surahe

Firefox中，::-moz-focus-outer和::-moz-focus-inner伪元素主要针对按钮类型的元素，包括button类型, reset类型以及submit类型。

 

button使用行高让文字垂直居中，但是在firefox里文字会偏下，而且点击的时候中间会有一个虚线框。Firefox的button系统样式如下：

button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner, input[type=”submit”]::-moz-focus-inner, 
input[type=”file”] > input[type=”button”]::-moz-focus-inner {
　　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,
input[type=”submit”]:-moz-focusring::-moz-focus-inner, input[type=”file”] > input[type=”button”]:-moz-focusring::-moz-focus-inner {
　　border-color: buttontext;
}

 

解决方案：

button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner,
input[type=”submit”]::-moz-focus-inner, input[type=”file”] > input[type=”button”]::-moz-focus-inner {
　　border:none /*去虚线框*/;
　　padding:0;
}

  

其实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果：

:focus {
    outline:none;    /*for IE*/
} 
::-moz-focus-inner {
    border-color: transparent;    /*for mozilla*/
}