css - 防止按钮在值更改时移动位置

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;