解决firefox下button文字设置行高没有垂直居中的问题
button使用行高让文字垂直居中,但是在firefox里文字会偏下,而且点击的时候中间会有一个虚线框。button的padding和margin我都程序定义过了,我想这可能跟浏览器的私有属性有关。于是用firebug查看浏览器系统样式发现以下代码:
1 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 { 2 border: 1px dotted transparent; 3 padding: 0 2px; 4 } 5 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 { 6 border-color: buttontext; 7 }
都是firefox私有属性::-moz-focus-inner惹的祸。
解决方案:
1 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 { 2 border:none /*去虚线框*/; 3 padding:0; 4 }