单独给浮动元素加 transform: scale(0.5) 不行，因其缩放整个盒模型（含文字、内边距、border），加剧 sub-pixel 渲染误差，导致模糊、错位、换行；正确做法是用 position: relative 父容器 + ::after 伪元素 + height: 1px + transform: scaley(0.5) + transform-origin: 0 100% + pointer-events: none 组合实现精准 1px 边框。
直接用 transform: scale() 修浮动元素的 1px 偏差，大概率会让问题更糟——它缩放的是整个元素（含内容、字体、内边距），不是只压窄边框；真正要动的，是伪元素的 border + 缩放组合，且必须配合定位基点与父容器约束。
为什么单独给浮动元素加 transform: scale(0.5) 不行
浮动元素本身已脱离文档流，再套缩放会放大 sub-pixel 渲染误差：文字变模糊、line-height 失准、相邻 margin collapse 更难预测。尤其当它带 border 或 box-shadow 时，缩放后边界会漂移，反而加剧 Retina 下的“虚线”“错位”感。
-
transform: scale(0.5)作用于整个盒模型，不是仅缩放 border - 缩放后元素尺寸变小，但父容器仍按原始 width 计算布局，容易触发换行或留白
- 若浮动元素内有子元素（如图标、文字），它们也被同比例缩小，视觉比例全乱
::after 伪元素 + transform: scaleY(0.5) 的正确写法
这是目前兼容性最好、可控性最强的方案，但细节决定成败：缩放必须锚定在正确位置，否则伪元素一偏，1px 线就“悬空”或“压过文字”。
- 父元素必须设
position: relative，否则::after的absolute定位会脱标到 body -
transform-origin必须写成0 100%（左下角），不能只写bottom—— Safari 某些版本对关键词解析不一致 - 伪元素用
height: 1px+transform: scaleY(0.5)，别用border-bottom: 1px，后者受box-sizing和line-height干扰 - 务必加
pointer-events: none，否则安卓 WebView 可能拦截点击事件
.card {
position: relative;
float: left;
width: calc(50% - 1px);
}
.card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: 0 100%;
pointer-events: none;
}
DPR=3 设备怎么处理？别硬写 0.333
写死 transform: scale(0.333) 在 DPR=3 机型上看似合理，但实际渲染可能因 rounding error 出现 0.99px 或 1.01px 边框，依然模糊。更稳的做法是用媒体查询分档，且 fallback 到整数缩放逻辑。
- 用
@media (-webkit-min-device-pixel-ratio: 3)单独命中 DPR≥3 场景 - 伪元素尺寸保持
width: 200%; height: 200%，border 仍为1px，只调transform: scale(0.333) - 但必须同步加
box-sizing: border-box，否则缩放后 border 位置飘移 - 如果项目已用 JS 注入
data-dpr属性，优先用属性选择器（如[data-dpr="3"]），比媒体查询更准
最容易被忽略的调试点：别只看效果，要看栅格化边界
开发机上看不出偏差，不代表真没问题。Retina 下的亚像素问题，必须用 Safari 开发者工具实测：
- 打开 Safari → 开发 → 开启「显示栅格化边界」（Show Rasterization Borders）
- 检查浮动容器及伪元素，若出现半透明描边，说明 sub-pixel 渲染已触发，此时哪怕肉眼“看起来还行”，也存在模糊风险
- 重点盯
line-height和font-size是否为整数——16.5px这类值在 iOS「更大字体」开启时会被系统插值，直接破坏缩放对齐
事情说清了就结束。真正麻烦的不是 scale 本身，而是它和浮动、伪元素定位、系统字体缩放三者咬在一起，改一个参数，另外两个可能立刻反扑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
