带有大边框的内联块按钮会向下移动两个像素

Question

我有两个“内联块”按钮，请参见下图：

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

示例： 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/

Answer 2

只需给.button css属性float: left，两个按钮都会保留在同一位置。这是因为float: left从文档流中删除了按钮，因此除了包含div之外，它不受其他内联元素的影响：

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

DEMO

我会提供更多代码，因为我在这里使用了一个浮点数，但我不知道文档的其余部分是什么样的，所以我无法补偿。