box-sizing: content-box 是默认陷阱，width仅指内容区，加padding和border后实际占宽为218px，易因亚像素误差导致跨浏览器布局错乱。
box-sizing: content-box 是默认陷阱
所有现代浏览器默认用 content-box，但你写 width: 200px; padding: 8px; border: 1px 时，真实占宽是 200 + 16 + 2 = 218px。开发者工具里“Declared width”仍显示 200px，容易误判；而“Computed width”才是最终渲染值——这个差值在跨浏览器字体渲染、行高计算中会被放大成 1px 溢出或换行。
浮动嵌套中伪元素和第三方组件常漏设 border-box
只给浮动项加 .float-item { box-sizing: border-box; } 不够。它管不了内部的 button、img、::before 或第三方图标组件。只要其中任意一个子元素沿用 content-box，其 padding/border 就会悄悄撑宽总宽度。临界状态下，Chrome 可能四舍五入进位，Firefox 向下取整，Safari 则卡在中间——结果就是同一份代码，在三个浏览器里分别掉行、露白、错位。
- 必须用
* { box-sizing: border-box; }或更稳妥的*, *::before, *::after { box-sizing: border-box; } - 这条规则要放在所有 CSS 的最顶部，否则被 normalize.css 或框架 reset 覆盖就失效
- 检查 DevTools → Computed →
box-sizing的“来源”，确认生效的是你写的那条
百分比宽度 + 缩放 + DPR 共同放大亚像素误差
缩放不是“改样式”，而是动态改变 layout width 和 devicePixelRatio。比如 width: 50% 在 DPR=2 的 iPhone 上算出来可能是 375.3px，浏览器强制取整为 375px；两列相加少 1px，立刻触发换行。这不是清除浮动能修的，也不是 viewport 设置问题。
- 避免
width: 33.333%这类浮点百分比，改用calc(100% / 3) - 含 padding 时直接补偿：
width: calc(50% - 16px)（假设父级padding: 16px） - 字体栈别混
system-ui，文字宽度在 macOS/Windows 渲染差 1–2px，足以压垮临界布局
Retina 屏下 sub-pixel 渲染让 1px 偏差肉眼可见
普通屏上 0.3px 偏差不可见，但在 DPR=2/3 设备上，浏览器会对非整数逻辑像素做插值渲染——表现为边框发虚、交界处露白、文字毛边。这不是 bug，是高分屏的正常行为，但浮动布局因脱离文档流、baseline 计算松散，特别容易暴露这个问题。
-
vertical-align: baseline即使没写也会生效，影响浮动项底部对齐 - 伪元素清除浮动时，必须加
font-size: 0; line-height: 0; height: 0;，否则额外行高干扰 baseline - 真要用 1px 边框，别碰
border: 0.5px——iOS 12、安卓 WebView、UC/QQ 浏览器基本不认，或四舍五入成 1px
真正麻烦的不是某一行 CSS 写错，而是浮动布局中每一层嵌套（从 SVG 图标到脚本注入的 ）都可能引入新的尺寸变量；只要有一个没被 border-box 覆盖，或一个字体渲染偏差没控住，1px 就会成为压垮一致性的最后一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
