最省事方案是width: fit-content，但Safari旧版不支持；稳妥方案为display: inline-block + white-space: nowrap；::before占位用于统一内边距视觉，需设width或visibility: hidden才生效。
按钮宽度随文字长度变化但保持最小宽度
直接用 width: fit-content 最省事，但老版本 Safari 不支持；display: inline-block + white-space: nowrap 是更稳妥的方案。关键不是“靠 ::before 占位”，而是避免内容撑开后按钮左右留白不均或高度塌陷——这时候才需要占位技巧。
::before 占位的真实作用是统一内边距视觉
当按钮里只有文字时，padding 会从文字边缘起算；但加了图标或伪元素后，基线对齐可能让上下 padding 看起来不一致。用 ::before 做一个不可见但参与盒模型计算的占位符，能强制按钮始终按固定内边距渲染：
button {
display: inline-flex;
align-items: center;
padding: 8px 16px;
min-width: 80px;
}
button::before {
content: "";
width: 1em; /* 或 0，但设为 0 时需配合 visibility: hidden */
flex-shrink: 0;
}注意：content: "" 本身不占空间，必须显式设 width 或 visibility: hidden 配合 height 才能影响布局。
为什么不用 width: max-content 或 width: -moz-max-content
这些值会让按钮宽度严格等于最长行内容宽度，在多行文本或换行场景下反而失控。实际项目中按钮几乎都是单行，所以重点应放在：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap防止意外折行 -
min-width保底，避免“删”“查”这类短词按钮过窄 -
box-sizing: border-box确保padding不额外增加总宽 - 如果真要用
::before，别设position: absolute——那样就脱离文档流，起不到占位作用
IE11 下 ::before 占位会失效的典型表现
IE11 对 inline-flex 中的伪元素支持不完整，::before 可能不参与 flex 布局计算。此时更可靠的做法是用一个空的 <span></span> 元素代替伪元素，或者干脆放弃占位、改用 text-align: center + 固定 padding 来视觉对齐。
真正容易被忽略的是：伪元素占位只在需要「精确控制内边距参与度」时才有意义，多数按钮根本不需要它——先确认你遇到的不是文字截断、行高错位或字体度量差异导致的假性“宽度不一致”。
