解决Firefox按钮文字不能垂直居中的问题

2011-12-11 | 夜光 | IT记录| 发表评论

Firefox按钮中的文字会偏下,而且点击的时候中间会有一个虚线框,用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: 0 2px;
}

对于提交按钮,只需要用如下代码即可解决:

/*让Firefox提交按钮字体居中*/
input[type="submit"]::-moz-focus-inner{
	border:none; /*去Firefox按钮点击时虚线框*/
	padding:0;
}

附加:在按钮中使用如下两种字体可以让Chrome和Firefox提交按钮字体行距相同

font-family:arial,Tahoma;
本文标签:
本文链接: http://boliquan.com/firefox-button-text-not-vertically-centered/
版权所有: 玻璃泉, 转载请注明本文出处。

2个评论

  1. 又看到这种代码,雨帆表示压力很大啊。

  2. 这个CSS技巧很实用。。。

发表评论

您的昵称 *

您的邮箱 *

您的网站

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif

Protected by WP Anti Spam