CSS：叠加在Chrome上看起来不错，但在Firefox 3中看不到：我该如何修复垂直偏移？

Question

http://ttt-ai.heroku.com/

如果你通过屏幕游戏（它的tic tac toe，所以它不会花费很长时间），在镀铬中，覆盖层适合电路板。但在Firefox 3中，叠加层向下移动了几个像素。

如何更改CSS以使其更加一致？

Answer 1

你正在定位.overlay_container有很多诡计（负边距），你应该把它放在.board，它有绝对位置，然后添加：

.overlay_container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

这可确保位置与所有浏览器匹配，如果电路板尺寸发生变化，叠加层将适应它。

这是一个剥离到最低限度的演示 http://jsfiddle.net/duopixel/qYejG/