表单控件盒模型无统一标准，需显式重置：统一设 box-sizing: border-box；height 改用 min-height + line-height；appearance: none 后必须手动补全 padding/border/font；IE11 等旧浏览器应隔离处理。
input、textarea、select 的默认 box-sizing 不一致
绝大多数现代浏览器对 input 和 textarea 默认使用 box-sizing: content-box，但 select 在部分旧版 Chrome / Safari 中可能表现异常——尤其当设置了 padding 或 border 后，整体宽度计算方式与预期不符。这不是规范问题，而是渲染引擎对表单控件“替换元素”（replaced element）的内部处理差异。
实操建议：
- 统一显式声明
box-sizing: border-box，覆盖所有表单控件：input, textarea, select, button { box-sizing: border-box; } - 避免只写
input[type="text"]这类选择器，漏掉input[type="email"]或input[type="number"]，它们在某些版本 Edge 中盒模型行为略有不同 - 注意
button元素也属于替换元素，同样受此影响，尤其在 flex 布局中容易撑开容器
height 计算在 Firefox 和 Chrome 中表现不一
给 input 设置固定 height: 40px 时，Chrome 会把 padding + border + content 都压缩进 40px 内（实际 line-height 可能被忽略），而 Firefox 更倾向保留默认行高，导致内容垂直居中偏上或文字被截断。
根本原因在于：表单控件的 height 属性在不同引擎中是否作用于“包含边框和内边距”的盒子，没有强制规范约束。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用
min-height替代height，配合padding控制视觉高度 - 对
input和textarea显式设置line-height（需与height匹配），但注意line-height对select无效 - 在 Firefox 中若发现文字贴顶，可加
vertical-align: middle或包裹一层flex容器修正对齐
appearance: none 后的盒模型重置必须手动补全
当你用 appearance: none 移除原生样式（比如下拉箭头、输入框圆角），浏览器并不会自动帮你重置 padding、border 或 font 继承逻辑。此时不同浏览器残留的默认内边距差异立刻暴露：Safari 的 select 有左右 12px padding，Chrome 是 8px，Firefox 则可能更小。
这意味着：不手动重置，width: 100% 在并排布局中极易错位。
实操建议：
- 只要用了
appearance: none，就必须紧接着写：input, select, textarea { padding: 0.5em 1em; border: 1px solid #ccc; font: inherit; margin: 0; } - 不要依赖
all: unset，它会清掉direction和unicode-bidi，导致 RTL 文本异常 - 对
select，额外加background-image: none，防止 Safari 仍渲染原生下拉图标干扰尺寸
IE11 及更老浏览器的表单盒模型是“不可修复”的硬伤
IE11 对 input[type="date"]、input[type="range"] 等控件完全忽略 box-sizing 和 height，且无法通过伪元素修改内部结构。它的盒模型就是“写死”的：比如一个 input[type="date"] 总是高 22px，无论你设多大 height 或 padding。
这不是 bug，是设计如此。微软明确未将这些控件纳入 CSS 样式化范围。
实操建议：
- 如需兼容 IE11，放弃对
input[type="date"]等控件的尺寸控制，改用普通input[type="text"]+ JS 日期插件 - 用
@supports (appearance: none)做渐进增强，把 IE11 隔离在外，避免样式污染 - 测试时务必在真实 IE11 环境跑，BrowserStack 或虚拟机里的“IE 模式”不能准确反映盒模型行为
