关于IE8与FireFox中，button内字体总是有一个不垂直居中的问题

标签：

关于IE8与FireFox中，button内字体总是有一个不垂直居中的问题

button的代码是这样子的：<button id=‘clear‘ class="defButton rightBtn listButton">清除<button>。

原因分析，因为两个浏览器默认button的样式中，border及padding的宽度不一致导致，但限制button的height、font-sizing、line-height和border-box时，会出现字体垂直位置不一致的问题。

而如果我只是将line-height设置为较小的值，在设置“vertical-align: middle;”时，IE8和FireFox是好了，但是Chrome又出问题了。如下图：

最后找的的解决方法：

将其写成：<button id=‘clear‘ class="defButton rightBtn listButton"><label>清除</label></button>

label的格式是：vertical-align: 0%;line-height:100%;

关于IE8与FireFox中，button内字体总是有一个不垂直居中的问题

标签：

原文地址：http://www.cnblogs.com/KuTeng/p/4596244.html