css - 这个 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；

感谢大家的建议。