<p>box-sizing: border-box 是缩放错位的第一道防线，它使 width 包含 padding 和 border，避免亚像素误差导致的掉行错位，需全局设置 { box-sizing: border-box; } 或更稳妥的 , ::before , ::after { box-sizing: border-box; }。</p>
box-sizing: border-box 是缩放错位的第一道防线
浮动、inline-block 或百分比宽度元素在缩放后掉行、错位，90% 源于 box-sizing: content-box。它让 width 只算内容区，padding 和 border 额外加宽，缩放时亚像素四舍五入误差被放大，50% + 8px padding 就可能变成 51.2%，直接撑破容器。
必须全局生效，局部加没用：
-
* { box-sizing: border-box; }最简有效，IE8+ 支持 - 更稳妥写法：
*, *::before, *::after { box-sizing: border-box; }，防伪元素加 border 后意外溢出 - 若用了 Element Plus 等 UI 库，先查它是否已设；冲突时用
.my-layout * { box-sizing: border-box; }局部覆盖
transform: scale 后的点击区域偏移怎么修？
浏览器派发 click 事件时，clientX/clientY 始终基于缩放前的布局盒计算，而 transform: scale() 只改渲染，不改几何占位——你点中了视觉按钮，坐标却落在它缩放前的位置上。
不能靠换单位解决，得用坐标换算：
立即学习“前端免费学习笔记（深入）”；
- 用无
transform的父容器代理事件，避免子元素自己带缩放 - 读取
element.getBoundingClientRect()获取当前视觉位置 - 用
window.visualViewport?.scale或手动维护缩放因子（如zoom: 120%时因子为1.2） - 修正逻辑：原始偏移量 ÷ 缩放因子 →
btn.style.top = (e.clientY - rect.top) / scale + 'px';
position: absolute 在缩放时“飞走”，该换什么？
top/left 是锁定初始像素坐标的，缩放后父容器视觉尺寸变了，但值不变，自然偏移。改单位（rem、em）没用——根字号不随 Ctrl+/- 动态变，基准就僵死。
真正有效的替换方案：
- 居中场景：用
position: relative; transform: translate(-50%, -50%)，因为transform的百分比基于自身宽高，缩放时比例恒定 - 侧边/悬浮按钮：用
position: relative; inset: 1rem auto auto 1rem;（上右下左），它不脱离文档流，随父容器缩放自然跟随 - 绝对定位嵌套必须砍掉：父元素带
transform就会创建新包含块，子absolute的top就按缩放后的父内容区算，错位指数级放大
border-image-slice 在缩放时变薄，怎么稳住？
border-image-slice: 30 不是 30px，而是原图 30 像素——图从 300×300 换成 600×600，同样写 30，实际只切 5%，边框就“变薄”了。
唯一稳定写法是百分比：
-
border-image-slice: 10%;—— 无论原图多大，都取四边各 10% 区域 - 只写一个值（如
10%）则四边等值；写两个（10% 20%）则上下=10%，左右=20% - 必须带
%符号：border-image-slice: 10和border-image-slice: 10%完全不同 - 配
fill时，确保border-width明确（如border: 20px solid transparent;），否则中心区域无空间可填
缩放错位从来不是单一问题，而是盒模型、定位模式、坐标系统和渲染层之间耦合失准的结果。最危险的是在 transform 父容器里再套 absolute 子元素——这种组合会让偏移不可预测，且调试时 outline 边框和 getBoundingClientRect() 返回值对不上，得先拆掉这层嵌套才能往下看。
