浮动元素1px错位主因是浏览器引擎对子像素计算的四舍五入差异，而非代码错误；box-sizing: border-box无法解决因baseline对齐、line-height等浮动附带渲染行为导致的偏差。
浮动元素边缘出现1px错位，是浏览器渲染差异还是代码问题？
绝大多数情况下，这不是“浏览器bug”，而是float触发的BFC边界计算方式在不同引擎中对子像素处理不一致导致的——尤其是当父容器宽度不是整数、或子元素宽高含小数（比如50%算出来是123.5px）时，WebKit（Chrome/Safari）和Gecko（Firefox）会四舍五入方向不同。
为什么box-sizing: border-box不能完全解决浮动1px偏差？
它只管盒模型内部尺寸分配，不管外边距塌陷、行内换行、基线对齐这些浮动附带的渲染行为。浮动元素脱离文档流后，其周围文本或行内块的baseline对齐策略在各引擎中本就不统一，哪怕所有尺寸都是整数，line-height、font-size微小差异也会让浮动块“看起来”偏了1px。
- 检查是否用了
vertical-align: baseline（默认值），换成vertical-align: top或vertical-align: middle常能立刻修正 - 确认父容器没有
font-size: 0清空间隙却忘了重置子元素字体，这会让行高计算失准 - 避免在浮动元素上同时设
margin和padding混用，某些旧版Edge会对margin-bottom做额外舍入
用display: inline-block替代float真能避开所有1px问题？
不能，只是把问题换了个地方：它引入了HTML空白符（换行/空格）生成的text-node间隙，这个间隙宽度在不同字号下是动态的（通常是4px左右），比浮动的1px更难控。而且inline-block仍受line-height和vertical-align影响，同样存在跨浏览器渲染抖动。
- 若坚持用
inline-block，必须清除空白符：font-size: 0设在父容器，再单独给子元素设font-size - 更稳妥的现代方案是直接上
display: flex，但要注意IE10+才支持完整flex属性，flex-wrap在旧版Safari中可能有1px截断 - 如果必须兼容IE8/9，老老实实用
float+margin-right: -1px微调（仅限已知固定数量子项）
调试时怎么快速定位是渲染差异还是布局逻辑错误？
打开开发者工具，逐个禁用CSS属性看变化——重点关掉float、vertical-align、line-height、font-size，观察1px是否消失。如果禁掉line-height后偏差没了，基本就是行框高度计算惹的祸。
立即学习“前端免费学习笔记（深入）”；
- 用
getBoundingClientRect()在控制台打印真实像素值：el.getBoundingClientRect().left，对比Chrome/Firefox输出的小数位 - 在CSS里临时加
outline: 1px solid red（不用border，避免影响盒模型），能看清渲染边界是否真的错开 - 注意缩放级别：Chrome在
125%系统缩放下，所有像素计算都会放大，此时1px偏差可能变成1.25px，进一步加剧不一致
