应显式重置 button 和 input[type="button"] 的 border、background、padding、font、outline 及 appearance 属性，并注意 vertical-align 对齐与 all: unset 的副作用。
直接重置 button 和 input[type="button"] 的关键属性
浏览器给 button 和 input[type="button"] 默认加了 padding、border、background、font 和 outline，不统一清除会导致布局错位或点击反馈异常。最稳妥的做法是显式覆盖这些属性，而不是依赖通配符：
-
border: none—— 清除默认边框（注意：部分旧版 IE 需要border: 0兼容） -
background: transparent—— 比background: none更可靠，避免 Safari 下背景残留 -
padding: 0—— 必须设为 0，否则按钮尺寸受内边距干扰 -
font: inherit—— 确保继承父级字体设置，避免 Chrome 下字体缩放异常 -
outline: none—— 移除聚焦时的蓝色/虚线环（但请保留可访问性，建议用:focus-visible替代全局移除）
处理 appearance 属性兼容性问题
Chrome/Safari/Firefox 对原生按钮控件渲染逻辑不同，仅靠 CSS 重置仍可能残留圆角、阴影或点击态。必须用 appearance 彻底剥离控件语义样式：
-
-webkit-appearance: none—— Safari 和旧版 Chrome 必须写 -
-moz-appearance: none—— Firefox 旧版本需要 -
appearance: none—— 现代标准，但单独写无效，必须三者共存 - 漏掉任一前缀，按钮在对应浏览器中仍会显示系统原生样式（比如 macOS 上的灰色渐变 + 圆角）
警惕 all: unset 在按钮上的副作用
有人试图用 all: unset 一键清空，但它会把 display: inline-block 也干掉，导致按钮变成 display: inline，破坏行内对齐和尺寸控制。更糟的是，它还会重置 cursor 和 user-select，让按钮失去点击反馈和文本不可选状态。
- 若真要用
all，应限定作用域：button, input[type="button"], input[type="submit"] { all: unset; } - 紧接着必须补回关键渲染属性：
display: inline-block、box-sizing: border-box、cursor: pointer - 实际项目中，不如老实用显式重置——可控、易调试、兼容性明确
表单内按钮需额外处理 vertical-align
当 button 和 input 混排在同一行（如搜索框+提交按钮），默认 vertical-align: baseline 会让按钮底部对齐文字基线，视觉上“下沉”。这不是样式残留，而是布局行为：
立即学习“前端免费学习笔记（深入）”；
- 统一设为
vertical-align: middle或vertical-align: top可对齐 - 若使用 Flex 布局，则无需此设置，但要注意
align-items默认值仍是stretch，需显式设为center - 不要依赖
line-height调整垂直位置——它只对内联元素有效，且易与字体度量冲突
