最稳妥做法是主动重置button默认样式：设border: none、background: transparent、padding: 0、appearance: none（含前缀）、font: inherit、line-height: normal、vertical-align: middle，并配touch-action: manipulation和role="button"保障移动端交互与无障碍。
按钮样式总被默认边框和背景干扰？
浏览器自带的 button 有默认边框、内边距、背景色和文字阴影，直接套用容易和设计稿对不上。最稳妥的做法是主动重置这些属性，而不是靠 !important 硬覆盖。
- 必须设置
border: none，否则 Safari 和旧版 Edge 的默认边框很难彻底去掉 -
background: transparent比background: none更可靠，后者在部分安卓 WebView 中不生效 -
padding建议统一设为0，再按需加内边距，避免不同浏览器默认值差异（Chrome 是1px，Firefox 是2px） - 别漏掉
appearance: none，它能干掉 WebKit 下的“金属质感”按钮外观
点击态（:active）为什么没反应？
移动端点击无反馈，通常不是 CSS 写错了，而是触发机制没配对。iOS Safari 默认会延迟 300ms 才触发 :active，且只对可点击元素生效。
- 确保按钮有
cursor: pointer，这能激活部分浏览器的点击态检测 - 给
button加touch-action: manipulation，这是 iOS 11+ 解决 300ms 延迟的关键 -
:active样式里别只改颜色——加个transform: scale(0.98)或opacity: 0.8，视觉反馈更明确 - 如果用了
div + onclick代替button，记得加role="button" tabindex="0"，否则:active不触发，键盘也无法聚焦
禁用态（disabled）样式怎么才真正“灰掉”？
button[disabled] 的样式优先级比普通选择器高，但很多团队只写 opacity: 0.5，结果文字依然可选、焦点仍能进入，甚至部分屏幕阅读器会忽略它。
- 必须同时设
pointer-events: none，阻止所有鼠标/触摸事件穿透 -
opacity: 0.6是底线，低于 0.5 可能违反 WCAG 对比度要求 - 加上
color: #999和background-color: #eee，别依赖 opacity 单一手段 - 若用 JS 动态控制禁用状态，别用
btn.style.disabled = true（无效），要用btn.disabled = true或btn.setAttribute('disabled', '')
按钮文字换行或溢出时布局崩了？
响应式场景下，按钮内容长度不可控，white-space: nowrap 是常见解法，但它会让长文本直接撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 用
white-space: normal+word-break: break-word，比overflow-wrap: break-word兼容性更好（IE11 支持前者） - 限制最大宽度：给按钮父容器设
max-width: 240px，再用min-width: fit-content防止过窄 - 图标按钮要特别注意：如果用
svg内联图标，记得设vertical-align: middle，否则基线错位导致高度突变 - 字体大小别用
rem直接写死，换成em或clamp()，比如font-size: clamp(0.75rem, 4vw, 0.875rem)
touch-action 和 role 这两个属性——它们不显眼，但一漏就导致移动端交互断层或无障碍失效。 
