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

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/