IE9和Z-index：元素在悬停时消失在父元素后面

Question

我有一个奇怪的错误，只在IE9中出现。不在IE8或IE10中，也不在任何其他浏览器中。

基本上，我有一大堆'divs'作为瓷砖，Plarest。我将CSS设置为

tile:hover {
  z-index: 1;
}

这样当我悬停时，任何溢出的元素（如框阴影等）都会出现在非悬停的瓷砖上。

然而，

在IE9上，该图块内的元素在悬停时在背景后面消失。基本上，图块的z-index正在将图块的背景移动到包含元素的一些（不是全部）图块之上。如果我这样做就不会发生

tile {
  z-index: 1;
}

我可以解决这个问题，方法是将每个元素放在一个位置：relative和z-index：1，但这不是一个好的解决方案。为什么会这样？

Answer 1

在发布后立即计算出来。不悬停时，磁贴没有z-index。所以它在载荷上很好，在悬停时很好，然后在悬停时消失。解决方案是提供

tile {
  z-index: 0;
}
.tile:hover {
  z-index: 1;
}