Question

我有9个按钮排成一个tic tac toe board。如果我添加一个X或O作为任何按钮的文本，则整个按钮在firefox中向上移动并向下移动到chrome / safari中。有什么想法吗？看起来很简单，但我花了很长时间试图修复它。

＆＃13;

gen_server

＆＃13;

/*//////////////////////////////////////
    	UNIVERSAL
    //////////////////////////////////////*/

* {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-weight: normal;
  text-decoration: none;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  font-weight: normal;
}
img,
video {
  max-width: 100%;
}
input,
button,
select,
submit {
  border: none;
}
/*//////////////////////////////////////
    	TIC TAC TOE
    //////////////////////////////////////*/

.players,
.ttt-board,
.scoreboard {
  width: 33%;
  float: left;
}
.btn {
  height: 80px;
  width: 80px;
  margin: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 4px 4px rgba(122, 122, 122, 1);
  -moz-box-shadow: 0px 0px 4px 4px rgba(122, 122, 122, 1);
  box-shadow: 0px 0px 4px 4px rgba(122, 122, 122, 1);
}
.x,
.o {
  font-size: 64px;
}

＆＃13;

Answer 1

您应该在.x，.o类

中尝试以下操作

position:absolute;
transform: translateX(-50%);

这是一个jsfiddle，看它有效。

输入字体时按钮移动

1 个答案: