浏览器自动填充不影响<button>，而是通过改变相邻<input>样式（如背景变色、padding异常、高度浮动）间接破坏按钮布局与视觉；需用全状态伪类覆盖autofill样式，并对按钮添加align-self、vertical-align等防御性CSS。
浏览器自动填充不会作用于 <button> 元素本身——它只填 <input> 和 <select>。你看到的“按钮被破坏”，实际是它旁边的输入框（比如密码框）被填充后，样式溢出、颜色冲突或布局错位，连带影响了按钮视觉表现。
为什么按钮看起来“被破坏”？
根本原因不是按钮被填充，而是：自动填充后的 <input type="password"> 背景变黄/蓝，文字发灰，且常伴随内边距异常、圆角失效或与相邻按钮高度不齐；若按钮和输入框共用父容器（如 flex 布局），一个元素尺寸/背景突变，会直接拖垮整体对齐。
- Chrome/Safari 对
input:-webkit-autofill强制注入高优先级内联样式，background-color直接被忽略 - 部分 UI 框架（如 Bootstrap）的
.btn类依赖vertical-align: middle，而 autofill 后的 input 高度浮动，导致按钮下沉或上移 - 密码框 autofill 时，
padding可能被浏览器悄悄加厚（尤其在 iOS Safari），挤压右侧按钮空间
input:-webkit-autofill 样式必须覆盖全状态
只写 input:-webkit-autofill 不够，用户 hover 或 focus 输入框时，浏览器会临时恢复默认样式，造成闪烁或按钮跳动。必须把状态链写全：
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #f8f9fa inset !important;
-webkit-text-fill-color: #212529 !important;
color: #212529 !important;
transition: background-color 5000s ease-in-out 0s !important;
}-
-webkit-box-shadow的1000pxspread-radius 是关键，确保盖住所有尺寸的输入框 -
transition时间拉长到 5000s，是为了彻底禁用 autofill 自带动画（否则按钮旁会出现“渐变色滑入”抖动） - 别漏掉
color声明——旧版 Safari 在 focus 时可能忽略-webkit-text-fill-color，文字变蓝
按钮自身需做防干扰适配
即使输入框样式修复了，按钮仍可能因布局联动出问题。建议在按钮上加这几条防御性 CSS：
立即学习“前端免费学习笔记（深入）”；
.btn-submit {
/* 防止被 autofill 输入框的 padding 挤压 */
align-self: flex-end;
/* 避免因 input 高度浮动导致 baseline 错位 */
vertical-align: top;
/* 禁用 button 默认的 user-agent margin（Chrome 会偷偷加 2px） */
margin: 0;
/* 显式声明 height，不依赖 input 高度 */
height: 40px;
}- 如果按钮和输入框同级且用 flex 布局，
align-self: flex-end比align-items: center更稳 - 避免用
height: 100%—— autofill 后 input 高度不可靠，100% 会继承错误值 - 不要给按钮加
border-radius后再让 input 也加相同值试图“对齐”，两者渲染机制不同，iOS 下极易错位
真正麻烦的不是样式本身，而是 autofill 触发时机不可控：SPA 页面中，React/Vue 渲染完成前浏览器就已填充 input，此时 CSS 还没注入，临时黄色背景会闪一下。这种“首帧污染”只能靠预加载关键 CSS 或延迟表单渲染来缓解，没有银弹。
