button默认样式跨浏览器不一致源于各浏览器UA样式表差异：Chrome加border-radius和阴影，Firefox设灰色边框与厚padding，Safari用vertical-align: baseline导致对齐偏移；需用-appearance: none、border/padding/margin清零、font/line-height继承等统一初始化。
button 默认样式为什么在 Chrome/Firefox/Safari 里长得不一样
因为每个浏览器都自带一套 user agent stylesheet，Chrome 给 button 加了 border-radius: 2px 和轻微阴影，Firefox 默认带灰色边框和更厚的内边距，Safari 则可能把 vertical-align 设成 baseline 导致和文字对不齐。这不是你写错了，是浏览器“出厂设置”不同。
常见现象包括：按钮高度不一致、文字上下偏移、圆角大小肉眼可辨、禁用状态颜色差异大。这些全发生在没写任何 CSS 的前提下。
-
button默认display: inline-block，但附带隐式vertical-align: middle（Chrome）或baseline（Safari），混排时容易错位 - 移动端 Safari 对
border-radius渲染激进，设成999px可能直接裁掉文字边缘 - IE11 把
button的line-height计算逻辑和现代浏览器不同，导致文字垂直居中失效
怎么用 CSS 初始化 button 样式才真正跨浏览器一致
别只清 border 和 padding，漏掉关键属性照样翻车。以下是一组最小可行初始化规则，覆盖 Chrome、Firefox、Safari、Edge 和 IE11：
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
padding: 0;
margin: 0;
outline: none;
background-color: transparent;
color: inherit;
font: inherit;
line-height: normal;
text-align: center;
cursor: pointer;
vertical-align: middle;
}
说明：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
-webkit-appearance: none和-moz-appearance: none是必须的，否则 Safari/Firefox 仍保留系统级按钮外观（比如 macOS 的金属质感） -
font: inherit比单独设font-size/font-family更可靠，避免继承链断裂 -
line-height: normal能统一基线对齐行为，比设固定值更兼容旧引擎 - 如果项目需支持 IE11，加一句
*vertical-align: middle（IE专有 hack）可解决部分对齐问题
button 和 input[type="button"] 哪个更适合做自定义按钮
选 button。虽然两者默认样式都乱，但 input[type="button"] 在 IE 和旧 Safari 中更难控制尺寸和内容布局——它不支持子元素（没法塞 svg 或图标字体），value 属性和显示文本分离，且某些版本对 padding 解析异常。
button 的优势明显：
- 允许任意 HTML 内容（
svg、img、span等），适合带图标的按钮 -
disabled状态天然支持语义化和无障碍（aria-disabled自动生效） - 在表单中默认不提交，除非显式设
type="submit"，误触风险低 - 所有现代浏览器对其盒模型处理一致，
box-sizing: border-box生效稳定
唯一要注意的是：不要省略 type="button"。在 form 里没写 type 的 button 默认是 submit，一按就刷新页面。
移动端 Safari 和 iOS 上 button 的特殊坑
iOS Safari 对按钮交互和渲染有额外限制，不是加个 cursor: pointer 就完事：
- 点击区域过小（
paddingpadding 设为12px - 使用
transform: scale()缩放按钮后，内部文字可能模糊，加transform: translateZ(0)强制硬件加速可缓解 -
:active伪类在 iOS Safari 中默认有 300ms 延迟，必须加meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，并配合-webkit-tap-highlight-color: rgba(0,0,0,0) - 如果按钮含 SVG 图标，确保
svg有明确width/height或viewBox，否则 iOS 可能渲染为空白
真正麻烦的不是样式不一致，而是某些行为（比如点击反馈、焦点管理、缩放渲染）在 iOS 上根本不会报错，只会静默失效。得真机测试，不能只靠模拟器。
