如何解决井字棋游戏输入内容后棋盘行大小发生变化的问题

修改方案 #

直接替换你的CSS代码为以下内容即可解决布局跳动问题，HTML结构无需调整：

/* 全局统一盒模型，避免宽高计算偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.board {
  display: flex;
  /* 固定行高和按钮高度一致，不会随内容变化拉伸 */
  height: 62px;
}
.board button{
  /* 固定按钮总尺寸，包含边框和内边距 */
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid #2d3e50;
  background-color: #34495e;
  /* 统一文本样式，空按钮和有内容按钮渲染效果完全一致 */
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}

核心修改逻辑 #

• 统一使用border-box盒模型，宽高设置直接包含内边距、边框，不会出现额外的尺寸溢出
• 每行.board设置固定高度+flex布局，不会因为子元素内容变化出现行高跳动
• 按钮设置固定宽高，用行高控制文本垂直居中，空按钮和填入X/O的按钮渲染尺寸完全一致，不会出现单行偏移

内容的提问来源于stack exchange，提问作者mrhrifat