解决firefox下button文字不能垂直居中的问题

button使用行高让文字垂直居中,但是在firefox里文字会偏下,而且点击的时候中间会有一个虚线框。button的padding和margin我都程序定义过了,我想这可能跟浏览器的私有属性有关。于是用firebug查看浏览器系统样式发现以下代码:

 

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:02px;
}
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; }

  

都是firefox私有属性::-moz-focus-inner惹的祸。
解决方案:

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;
}

  

posted @ 2013-06-01 12:23  allexwang  阅读(394)  评论(0编辑  收藏  举报