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

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;