jquery - Chrome 中的表格行为

Question

我正在创建一个简单的内存游戏，出于某种原因，当我在 chrome 中添加和删除类时，表格单元格会展开。谁能告诉我为什么会这样？ 这是我用来在单击时添加和删除类的脚本。这就是整个 fiddle 。 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;
}