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

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/