按钮兼容性问题源于浏览器UA样式、渲染逻辑及API调用上下文的系统级差异；需显式重置margin、vertical-align、line-height，避免依赖通配符重置，并在用户手势同步路径中调用clipboard API。
按钮兼容性问题不是样式没写对，而是浏览器对 <button> 的 UA 样式、渲染逻辑、API 调用上下文存在系统级差异——直接套通用 reset 或只改 margin 往往治标不治本。
button 默认 margin 在 Safari 和 Firefox 中不一致
并排多个 <button> 时，Safari（尤其 15–16）常默认加 margin: 0.5em，Firefox/Chrome 多为 margin: 0。这不是 bug，是 UA 样式实现差异，会导致布局错位。
- 别依赖
* { margin: 0; }—— 它无法覆盖 Safari 某些版本中带!important的 UA margin - 显式重置必须写全：
button { margin: 0; vertical-align: middle; line-height: normal; } - 如果用了
Normalize.css，它默认保留部分 UA margin，需额外加button { margin: 0; }覆盖 - 若按钮和文字混排出现“空隙”，大概率是
vertical-align缺失导致基线对齐偏差，不是 margin 问题
button 文字垂直居中在移动端偏上
PC 模拟器里看着居中，真机（尤其安卓 WebView）里文字明显偏上，根本原因不是 line-height 没设对，而是各浏览器对 line-height、font-size、padding 的盒模型解析不一致，且部分引擎会额外注入 focus outline 内边距。
- 单行按钮优先用
height+line-height匹配方案，但必须显式写height（不能靠内容撑开） - Firefox 需额外重置：
input::-moz-focus-inner { border: 0; padding: 0; } - 多行、含图标或响应式场景，放弃
line-height，改用display: inline-flex+justify-content: center+align-items: center - 避免对
input[type="button"]直接设 flex —— 老浏览器不支持，统一用<button>标签更稳妥
移动端复制按钮点击无反应
iOS Safari 和部分安卓 WebView 对 navigator.clipboard.writeText() 有严格限制：必须在用户手势（click 或 touchend）的**同步执行路径内**调用，任何异步延迟（setTimeout、Promise.then）都会触发 NotAllowedError。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
setTimeout(() => navigator.clipboard.writeText(...), 0)或先发请求再复制 - 正确写法：在事件回调第一层直接
await navigator.clipboard.writeText(...)，并用try/catch捕获NotAllowedError、TypeError、SecurityError - 降级 fallback 必须用
<textarea>插入 DOM、focus()、select()，且不能设display: none或visibility: hidden—— 改用position: absolute; left: -9999px; - CSS 层面禁用
user-select: none时，务必给<textarea>单独放开：-webkit-user-select: auto;
button 自适应宽度在 IE11+ 仍失效
width: auto 在 <button> 上经常无效，因为 Chrome/Firefox 默认赋予 min-width: -webkit-min-content 或类似逻辑，导致按钮强行撑宽；display: flex 又会让按钮块级化、破坏行流。
- 最优解是
display: inline-flex—— 它让按钮成为可伸缩的内联盒子，兼容 IE11+，且不打断文字流 - 必须包裹容器（如
<span class="btn-wrapper"><button>文本</button></span>），直接给<button>设inline-flex无效 - 禁用所有
width/min-width/max-width，仅靠padding控制视觉尺寸 - 要支持文字省略号，三者缺一不可：
white-space: nowrap、overflow: hidden、text-overflow: ellipsis，且必须设max-width（建议写在 button 上）
真正难的不是写出能跑的代码，而是判断这个按钮该用 <button> 还是 input[type="button"]、该走 flex 还是 line-height、该容忍 UA 差异还是主动重置——每个选择背后都是对目标环境渲染链路的理解深度。
