javascript - 当子元素的不透明度发生变化时，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 随机旋转和间隔。

这里有两个 fiddle : http://jsfiddle.net/awm0ccbp/7/

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

这是第二个版本: http://jsfiddle.net/awm0ccbp/6/这一次，在你揭开两张卡片后，卡片再次被覆盖。从第三次点击开始，事情会变得一团糟:之前未发现的卡片被翻转过来(不透明度回到 0)，但新发现的卡片将以某种方式获得额外的边距，导致所有的牌都被推来推去。

我相信边距来 self 们的子元素，它是旋转的，因此将卡片推到一边。

那么为什么它在 Mac 上表现如此奇怪，在你把卡片盖好备份之后？

Answer 1

像这样在所有 div.card 上应用 font-size:40px:

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

事实上，当您删除未覆盖的类时，您也会删除字体大小，因此字体大小的变化会导致这种变化。 (更新 fiddle http://jsfiddle.net/awm0ccbp/8/)