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

Question

我正在建立一个记忆游戏。它在Windows上的chrome上工作得很好。

然而，在mac电脑上，有一个奇怪的故障，在第二组卡片被发现后，它会导致卡片跳转。

每一张卡的代码如下：

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

计数器是for循环中的int变量，num是卡片的表面(一个随机数，确保它每个数字只有1对)。

卡被我们的.card的背景色改变所覆盖或暴露，子元素.card div的不透明度分别被设置为1或0。此外，卡片是通过jquery随机旋转和间隔的。

这里有两个小摆设：http://jsfiddle.net/awm0ccbp/7/

点击每一张卡来揭开它。它应该能正常工作。基本上，它所做的就是每次单击卡片时，将子元素的不透明度从0更改为1。

下面是第二个版本：http://jsfiddle.net/awm0ccbp/6/ --这一次，当你在第三次点击发现了2张cards.Starting之后，卡片又被覆盖了，事情会变得很混乱:以前没有发现的卡片会被翻转(不透明回到0)，但是新发现的卡片会得到一个额外的空间，导致所有的卡片被推开。

我相信毛边来自我们的子元素，它是旋转的，因此把卡片推到一边。

那么，为什么在你把卡盖好后，在mac上表现得如此怪异呢？

Answer 1

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

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

实际上，当您移除未发现的类时，您也会删除字体大小，因此字体大小的变化会导致这种变化。(更新小提琴http://jsfiddle.net/awm0ccbp/8/)