解决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 }

演示

posted @ 2012-06-21 18:02  无赖君子  阅读(493)  评论(0编辑  收藏  举报