css - 带有大边框的行内 block 按钮向下两个像素

Question

我有两个“inline-block”按钮，见下图:

但是，如果您单击，您会看到另一个按钮向下两个像素。

示例: http://jsfiddle.net/caio/EUjeY/ .

.button {
    border-radius: 2px;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ccc;
    background: #eee;
    padding: 5px 10px;
    display: inline-block;
}

.button:hover {
    background: #e7e7e7;
}

.button:active {
    border-bottom: 1px solid #ddd;
    padding: 7px 10px 5px;
}

你能帮我防止这种情况发生吗？

谢谢。

Answer 1

您可以将其添加到您的 .button 类中:

vertical-align: top;

工作示例:http://jsfiddle.net/uW7Sa/1/