jquery - Chrome 中的表格行为

Question

我正在创建一个简单的记忆游戏，由于某种原因，当我在 chrome 中添加和删除类时，表格单元格会展开。谁能告诉我为什么会这样？这是我用来在点击时添加和删除类的脚本。这就是整个小提琴。 http://jsfiddle.net/stoney265/4XznK/

$('td').click(function () {
    if ($(this).hasClass('clicked') || $(this).hasClass('completed')) {
        $(this).stopPropagation();
        $(this).preventDefault();
        return;
    }
    $(this).addClass('clicked');
    tempArr.push($(this).text());
    var len = tempArr.length;
    if (len > 1) {
        if (tempArr[0] === tempArr[1]) {
            alert("Good job!");
            $('.clicked').addClass('completed');
            $('.completed').removeClass('clicked');
            winCounter = winCounter + 1;
        } else {
            alert("Try again!");
            $('.clicked').removeClass('clicked');
        }
        tempArr.splice(0, 2);
    }
    if (winCounter === countCells / 2) {
        alert('You won!');
    }
    console.log(countCells, winCounter);
});

Answer 1

该text-indent物业是造成问题的原因。

您可以通过将背景更改为黑色或将文本颜色更改为白色来达到所需的效果

http://jsfiddle.net/4XznK/13/

table td {
    border: 1px solid black;
    height: 40px;
    width: 30px;
    text-align: center;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    /* background black */
    background-color: #000;
}
.clicked {
    text-indent: 0;
    text-align: center;
    height: 40px;
    width: 30px;
    table-layout: fixed;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    /* background white */
    background-color: #fff;
}
.completed {
    background-color: white;
    overflow: hidden;
    height: 40px;
    width: 30px;
    table-layout: fixed;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}