火狐firefox下按钮去掉虚线框和使文字垂直居中解决方案

在火狐下的input或者button默认显示并没有达到绝对的垂直居中,文字整体居中偏下的位置,而且当点击按钮之后,按钮上会出现一圈虚线,这很影响视觉效果,更重要的是你的设计师要你必须处理掉这两个问题。

解决方案:

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: none;
}

没有使用此解决方案时按钮默认效果如下:

火狐下按钮默认效果

火狐下按钮默认效果

当使用此解决方案之后的效果如下:

火狐下去掉按钮虚线和使文字垂直居中

火狐下去掉按钮虚线和使文字垂直居中

备注:这种解决方案是无意中在twitter前端框架Bootstrap的基础样式表里看到的,遂亲自测试一下,其中虚线框被成功去掉,经过对比文字会较默认位子向上偏移,反正按我要求基本上达到垂直居中了。