九宫格中按钮错位因默认 inline 特性及盒模型敏感，需设格子为 flex/grid、按钮宽高100%、清除 margin/border；居中需格子加 align-items/justify-content；交互应使用语义化 button 元素并完善可访问性。
九宫格容器里直接塞 <button></button> 会错位？
默认情况下，<button></button> 是 inline 元素，但九宫格（比如用 display: grid 或浮动/inline-block 实现）对子元素的盒模型很敏感。直接往格子里加按钮，容易出现垂直对齐偏移、上下留白、宽度撑不满等问题。
- 确保九宫格每个格子是
display: flex或display: grid容器，再把按钮设为width: 100%; height: 100% - 去掉按钮默认的
margin和border（尤其是 Firefox 下按钮自带margin） - 如果格子用
inline-block实现，按钮需设vertical-align: top，否则底部留白
用 grid 布局时按钮不居中？
Grid 容器只控制子元素（即九宫格的 9 个 <div>）位置，不自动控制子元素内部内容（比如按钮）的对齐。按钮默认左上角贴边，看着像“没居中”。
<ul>
<li>每个格子加 <code>display: flex; align-items: center; justify-content: center
text-align: center —— 这只影响内联内容，对块级按钮无效flex-direction: column 控制堆叠顺序更稳按钮点击后样式丢失或交互异常？
常见于用 <div> 模拟按钮但没加 <code>role="button" 和键盘事件，或用了 <a></a> 却没处理 href="#" 的跳转副作用。
- 真按钮就用
<button type="button"></button>，别用<div> + click 监听器代替 <li>如果必须用 <code><a></a>（比如要支持右键新标签页），加preventDefault()并设tabindex="0" - 记得补上
:focus-visible样式，不然键盘用户找不到焦点在哪 - 移动端注意
touch-action: manipulation，减少 300ms 延迟 - 给九宫格容器（如
<section class="grid-3x3"></section>）绑定click，用e.target.matches('button[data-action]')判断 - 按钮带上语义化
data-action属性，比如<button data-action="play"></button>，比靠id或索引更可靠 - 避免用
e.target.tagName === 'BUTTON'—— 如果按钮里有图标（<svg></svg>），点图标时target是svg，不是button
九宫格按钮太多，怎么批量绑定事件？
给 9 个按钮分别写 addEventListener 不仅啰嗦，还难维护。委托到父容器最稳妥，但要注意事件目标判断是否准确。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是按钮的可访问性状态：禁用时不仅要加 disabled，还得同步更新 aria-disabled 和视觉样式；加载中状态建议用 aria-busy="true" 而不是只改文字。这些不显眼，但一上线就被读屏软件揪出来。
