直接写 input { height: 36px } 失效，因Chrome依赖box-sizing与padding解析高度，Safari忽略该声明而按内容撑高，Firefox下select不响应height，textarea无视line-height；这是各浏览器UA样式对可替换元素的不同实现逻辑。
为什么直接写 input { height: 36px } 会失效
Chrome 对 input 的 height 解析依赖于 box-sizing 和默认 padding，而 Safari 会忽略该声明、坚持按内容撑高；Firefox 下 select 根本不响应 height，只随字体和内边距变化；textarea 则完全无视 line-height 控制高度。这些不是 bug，是各浏览器 UA 样式表对“可替换元素”的不同实现逻辑。
常见错误现象包括：input 和 select 在同一行时明显错位、input-group 里按钮被顶出、聚焦后文字被裁剪或出现滚动条。
- 不要用固定像素值硬设
height或line-height - 必须显式声明
box-sizing: border-box，通配符* { box-sizing: border-box }在 Safari 15+ 和部分 Android WebView 中对button和select失效 - 优先用
min-height+padding组合，例如：min-height: calc(1.5em + 0.75rem + 2px)（含字体行高、上下内边距、双边框）
appearance: none 为啥没隐藏 select 箭头
仅写 appearance: none 不足以覆盖所有浏览器——Safari 需要 -webkit-appearance: none，Firefox 需要 -moz-appearance: none，且必须配合 background 或伪元素手动绘制下拉图标，否则箭头仍会透出。
更关键的是：某些旧版 Edge 和 iOS WebKit 会把 appearance: none 当作无效声明静默丢弃，导致样式回退到原生控件。
立即学习“前端免费学习笔记（深入）”；
- 三属性必须同时存在：
appearance: none、-webkit-appearance: none、-moz-appearance: none - 移除原生箭头后，需用
background-image: url("data:image/svg+xml,...")或::after插入自定义图标 - 避免在
select上设padding-right过小，否则自定义图标会被截断
重置 margin/padding 时最容易踩的坑
全局写 * { margin: 0; padding: 0 } 看似省事，但会破坏 button 的点击热区、压缩 textarea 滚动条宽度、让 details/summary 折叠箭头错位，甚至影响屏幕阅读器对语义间距的识别。
真正需要归零的是容器级元素（如 form、fieldset），而非所有表单控件本身。表单控件的默认内边距是交互可用性的基础。
- 只重置明确干扰布局的元素：
form、fieldset、legend、label的外边距 - 对
input、select、textarea、button显式声明margin和padding，单位统一用rem或px，避开em在 UA 中计算不一致的问题 - 特别注意
button：Chrome 默认padding: 0.25em 1em，Firefox 是padding: 2px 8px，必须写死，例如padding: 8px 16px
Flex 布局中 input 和 button 对不齐怎么办
当 .input-group 使用 display: flex 时，input 和 button 常因默认 align-items 行为差异错位：Chrome 将 input 视为基线对齐，Safari 却按内容盒顶部对齐；若其中任一元素 box-sizing 仍是 content-box，Safari 会触发隐式 min-width: min-content，导致按钮突然撑宽。
这不是 Flex 自身问题，而是表单控件在弹性容器中暴露了底层渲染分歧。
- 给
.input-group加align-items: stretch，并确保子元素都设box-sizing: border-box - 禁用 Safari 的保护机制：
button { min-width: 0 }（否则它会拒绝收缩） - 避免混用
height和flex：如果父容器设了height，子项用flex: 1时，input可能被拉伸变形，改用flex: 1 0 auto更稳
最麻烦的从来不是怎么写 CSS，而是哪些地方不能“信任浏览器”。比如 box-sizing 在 button 上是否真生效、appearance 是否被 Safari 静默忽略、min-height 在旧 WebView 中是否解析为 0——这些都得靠真实设备或模拟器验证，光看 DevTools 的 computed styles 不够。
