当子元素的不透明度发生变化时，mac上的边距有奇怪的行为

Question

我正在建立一个记忆游戏。它适用于Windows上的chrome。

但是使用Mac时，会出现一个奇怪的故障，导致卡片在第二组卡片被揭开后跳转。

每张卡的代码是：

<div id="'+counter+'" class="'+num+' card covered"><div>'+num+'</div></div>

而counter是来自for循环的int变量，num是卡的面（一个随机数，确保每个数字只有一对）。

通过更改.card的背景颜色来覆盖或覆盖卡片，并将子元素.card div的不透明度分别设置为1或0。 卡也被旋转并通过jquery随机分开。

这是两个小提琴： http://jsfiddle.net/awm0ccbp/7/

点击每张卡片以揭开它。它应该工作正常。 基本上它的作用是每次你点击一张卡片时，将子元素的不透明度从0改为1.

这是第二个版本： http://jsfiddle.net/awm0ccbp/6/ 这次卡片在你发现2张卡片后再次被覆盖。从第三次点击开始，事情就会变得混乱：之前发现的卡片被翻转过来（不透明度回到0）但是新发现的卡片会以某种方式获得额外的边距，从而导致所有卡片都要被推开。

我相信边距来自我们的子元素，它被旋转，因此将卡片推到一边并且向侧面移动。

那么，为什么它会在你的卡上备份之后在Mac上表现得如此奇怪？

Answer 1

在所有div.card上应用font-size:40px，如下所示：

div.card{
    display:inline-block;
    width:100px;
    height:100px;
    cursor:pointer;
    overflow: hidden;
    font-size:40px;
}

实际上，当您删除未覆盖的类时，也会删除font-size，因此font-size的更改会导致该移位。 （更新了小提琴http://jsfiddle.net/awm0ccbp/8/）