这个css发生了什么事？

Question

我有一些css应用于按钮。

我遇到的问题是渲染会在不改变css的情况下发生变化。它只发生在firefox中。

这是它应该是什么样子：

以下是我回帖时不时发生的事情

如您所见，底部会添加额外的一行。

这是css：

.button
{
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box;
}

.button.nav
{
    background:#999;
    background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%, rgba(153,153,153,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(100%,rgba(153,153,153,1)));
    background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    background: linear-gradient(to bottom, rgba(187,187,187,1) 0%,rgba(153,153,153,1) 100%);
    border:solid 1px #999;
    -moz-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset 0 1px 0 #ddd;
    -webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset 0 1px 0 #ddd;
    box-shadow:0 2px 1px -1px rgba(0,0,0,0.2),inset 0 1px 0 #ddd;
    color:#fff;
    font-size:13px;
    height:26px;
    line-height:26px;
    text-shadow:#999 0 -1px;
}

.button.nav:hover
{
    background:#777;
    background: -moz-linear-gradient(top, rgba(153,153,153,1) 0%, rgba(119,119,119,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,153,153,1)), color-stop(100%,rgba(119,119,119,1)));
    background: -webkit-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    background: -o-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    background: -ms-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(119,119,119,1) 100%);
    border-color:#777;
    -moz-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset  0 1px 0 #bbb;
    -webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset  0 1px 0 #bbb;
    box-shadow:0 2px 1px -1px rgba(0,0,0,0.2), inset 0 1px 0 #bbb;
    text-shadow:#777 0 -1px;
}

有人有任何想法吗？

Answer 1

尝试应用样式button.nav也被访问并激活

.button.nav, .button.nav:visited, .button.nav:active{
    /* style */
}

Answer 2

得到了答案。

红色是没有设置高度的背景容器。绿色跨度的行高设置等于按钮的高度，但是它们的对齐方式已设置为默认的基线。

我可以做两件事之一。 1）删除行高（虽然未在IE中测试）或2）添加verical-align：middle;

感谢大家的建议。