当值改变时，防止按钮移动位置

Question

我在2 x 2网格中有4个按钮。单击按钮时，按钮会更改文本。

问题是当它们从空白值变为值时，按钮会移动。我似乎无法找到防止这种情况发生的方法。

CSS：

.A, .B {
height: 40px;
width: 40px;
padding: 0;
margin-top: -10px;
}

使用Javascript：

$('.A').click(function (evt) {
    var t = $(this)[0].innerHTML;
    if (t == '') $(this).text('A');
    else if (t == 'A') $(this).text('a');
    else if (t == 'a') $(this).text('');
    evt.preventDefault();
});
$('.B').click(function (evt) {
    var t = $(this)[0].innerHTML;
    if (t == '') $(this).text('B');
    else if (t == 'B') $(this).text('b');
    else if (t == 'b') $(this).text('');
    evt.preventDefault();
});

我在这里提供了一个jsfiddle：

http://jsfiddle.net/2j9k0hLp/1/

Answer 1

这是由于文本/行对齐的奇怪。

尝试添加vertical-align例如：

    vertical-align: top;