JavaScript动态设置按钮文本时按钮移位布局异常问题

布局偏移的核心原因是行内/行内块元素默认的基线对齐规则：

• 你使用的<button>默认是行内块元素，默认vertical-align属性值为baseline（基线对齐）
• 空按钮的基线是元素自身底部，当按钮被点击填入X/O文本后，该按钮的基线会变为内部文本的基线
• 同一行的行内块元素会自动按照当前最高的基线位置对齐，因此填入内容的按钮会带着同行空按钮一起下移，等整行都填满文本后，所有按钮基线统一，位置就恢复正常。

不需要修改JS逻辑，只需要在按钮的CSS规则中统一设置垂直对齐方式，覆盖默认的基线对齐即可。
找到现有CSS里的button选择器，新增vertical-align: top;属性，修改后代码如下：

button {
  height: 100px;
  width: 100px;
  padding: 0px;
  border-color: black;
  border-style: solid;
  border-width: 2px;
  color: black;
  font-size: 30px;
  vertical-align: top; /* 新增该行，固定按钮垂直对齐规则 */
}

如果觉得top对齐不符合视觉预期，换成vertical-align: middle;或者vertical-align: bottom;也可以解决偏移问题，按实际视觉效果选择即可。

额外提示：你当前的平局判断逻辑依赖按钮初始内容为空格" "，如果后续要加游戏重置功能，记得把重置后的按钮内容设为空格，不要设为空字符串，否则平局判断会提前触发。

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