CSS: наложение выглядит хорошо в Chrome, но не в Firefox 3: как исправить вертикальное смещение?

Question

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

Если вы попадаете в игру поверх экрана (его крестики-нолики, так что это не займет много времени), то в хромированной области оверлей соответствует доске. Но в 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/