按钮中直接用 background-image 会错位或不显示，因未设 width/height、background-repeat: no-repeat 及正确 background-position；应配合伪元素或 Flex 实现图文分离，并注意旧浏览器兼容性。
按钮里直接用 background-image 会错位或不显示？
精灵图（Sprite）本身是静态图片，不能直接塞进按钮的文本内容里；必须靠 CSS 背景定位控制显示哪一块。常见错误是只设了 background-image 却没关掉默认的 background-repeat，或者忘了设宽高——按钮默认没有固定尺寸，背景图自然“看不见”。
- 按钮必须显式设置
width和height（或用padding+line-height撑开），否则背景无处可落 - 务必加
background-repeat: no-repeat，否则整张精灵图平铺 - 用
background-position移动背景图，数值为负值（如-24px -68px），表示向左/上偏移对应像素 - 避免用
img标签嵌套进按钮——那不是精灵图用法，还破坏语义和可访问性
如何让图标随按钮状态（hover/active）自动切换？
精灵图的优势就是把多个状态图标压在同一张图里，靠 background-position 切换。关键不是写 JS，而是用 CSS 伪类精准控制不同状态下的偏移量。
- 默认状态设一个
background-position，比如0 -48px（取第一行第二个图标） -
:hover里改background-position，比如0 -96px（下一行同列） -
:active可再偏移到第三行，确保点击反馈明确 - 所有状态共用同一张
background-image，避免重复请求 - 注意：如果按钮有文字，要留足右侧 padding，防止文字盖住图标
用 inline-block 还是 flex 布局放图标和文字？
纯靠背景图的话，图标和文字其实是“叠”在一起的，没法单独控制对齐或间距。真要图文分离、响应式调整，得放弃纯背景方案，改用伪元素或额外标签。
- 推荐用
::before伪元素承载精灵图：content: ""+display: inline-block+ 定位背景，文字自然跟在后面 - 这样图标和文字能分别设置
vertical-align，比如都设middle对齐更稳 - 若用 Flex，按钮本身设
display: flex，再放一个span包图标（background）、一个span包文字，控制gap更直观 - 但注意：Flex 容器会让子元素继承
min-width: auto，可能撑开按钮宽度，需手动设min-width: 0
IE11 或旧版 Safari 下精灵图偏移不准？
老浏览器对小数像素、负值定位或 background-size 缩放支持不稳定，尤其当精灵图被缩放（比如用 background-size 做高清适配）时，background-position 计算容易偏差 1px。
立即学习“前端免费学习笔记（深入）”；
- 优先用整数像素偏移，避免
-24.5px这类值 - 不用
background-size缩放精灵图——改用原始尺寸图，靠容器宽高控制显示区域 - 检查是否启用了
box-sizing: border-box，否则 padding 会影响背景定位基准点 - 若必须缩放，用
transform: scale()作用于伪元素，比background-size兼容性更好
