td边框错位根源在于默认padding、vertical-align与表单控件基线对齐冲突；解决需三步：清padding、统vertical-align、设box-sizing:border-box确保border贴边，再加min-width:0和自定义focus样式防移动端跳动。
td里放时边框错位的根源
根本不是本身的问题，而是
padding、vertical-align和浏览器对表单控件基线对齐的默认行为在打架。比如Chrome把<input type="text">默认按基线对齐，而vertical-align: middle，结果输入框视觉上“浮”在单元格中间偏下位置，边框看起来不齐。
强制统一边框对齐的三步实操
不用改HTML结构，纯CSS就能解决：
- 清除
内边距： td { padding: 0; }，否则上下左右总被撑开- 重置垂直对齐：
td, input { vertical-align: top; }（或bottom），避免基线浮动- 显式控制边框：
input { border: 1px solid #999; box-sizing: border-box; }，确保border计入宽高计算为什么加
box-sizing: border-box不能省因为默认是
content-box，你设width: 100%时，实际宽度 = 内容宽 + padding + border，超出容器就溢出或换行。加上 box-sizing: border-box后，width: 100%才真正填满单元格宽度，边框自然贴边。移动端聚焦时边框跳动怎么办
Safari iOS 和部分安卓浏览器在获得焦点时会自动放大、滚动，导致边框“抖一下”。关键不是禁用缩放（那会伤可访问性），而是：
- 给
加 min-width: 0;防弹性收缩- 用
input:focus { outline: none; box-shadow: 0 0 0 2px #007bff; }替代原生outline- 避免在
上写 font-size——它会间接影响input高度，统一在input上设font-size: 14px;边框对齐看着是像素级问题，但背后是盒模型、对齐机制、浏览器默认样式三层叠加的结果。改一处容易漏另一处，建议把这四条规则打包成类名（如
.td-input-fix）复用，别零散写。 - 用
- 重置垂直对齐：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
