CSS:叠加层在 Chrome 上看起来不错，但在 Firefox 3 中却不行:如何修复垂直偏移？

Question

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

如果您进入游戏结束屏幕(它是井字游戏，所以不会花很长时间)，在 chrome 中，叠加层适合棋盘。但在 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/