如何让按钮内innerHTML居中？井字棋跨浏览器布局异常排查

字体不生效的解决办法 #

• 若使用自定义字体，需确保@font-face声明包含通用字体格式（woff2、woff）且文件路径正确：

@font-face {
  font-family: 'CustomTicFont';
  src: url('ticfont.woff2') format('woff2'),
       url('ticfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

• 为按钮设置字体栈，即便指定字体加载失败，也能自动 fallback 到系统通用字体：

.game-btn {
  font-family: 'CustomTicFont', 'Arial', 'Helvetica', sans-serif;
}

按钮内X/O位置偏移修复 #

• 统一全局盒模型，消除不同浏览器默认边距、内边距的差异：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

• 使用Flex布局实现精准居中，替代text-align等方案，确保跨浏览器兼容：

.game-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 固定按钮尺寸，避免内容撑开导致的布局偏移 */
  width: 120px;
  height: 120px;
  /* 清除按钮默认样式，自定义边框与背景 */
  border: 2px solid #333;
  background: #f5f5f5;
  /* 固定字体大小，避免浏览器缩放差异 */
  font-size: 60px;
  /* 重置行高，消除垂直方向多余空间 */
  line-height: 1;
}

• 重置浏览器默认的按钮聚焦样式，避免额外元素干扰布局：

.game-btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.game-btn::-webkit-focus-ring {
  outline: none;
}

额外注意点 #

• 避免使用兼容性差的CSS属性，必要时可添加浏览器前缀（当前主流浏览器多数属性无需前缀）；
• 按钮的内边距、外边距需显式设置，不要依赖浏览器默认值。

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