移动端1px边框错位主因是DPR≥2时CSS像素被拉伸，导致盒模型、伪元素定位与缩放不同步；须用tr/table伪元素+scaleY(0.5)或box-shadow/gradient等方案替代直接border。
移动端表格1px边框为什么总错位
直接给 table 或 td 写 border: 1px solid #ccc，在 iPhone 或 DPR≥2 的安卓机上必然错位、发虚、粗细不均——不是你漏写了 border-collapse: collapse，而是浏览器把 1 CSS 像素拉伸成 2/3 个物理像素后，表格单元格的盒模型边界、伪元素定位锚点、缩放坐标系全不同步，导致视觉断裂。
table td::after + scaleY(0.5) 定位失效的根因
表格单元格默认是 display: table-cell，它不创建新的层叠上下文，也不接受 position: relative 的常规定位行为。直接套用普通 div 的伪元素方案，::after 会脱离 td 上下文，定位到 table 或 body，造成边框漂移、只画半截、或完全消失。
-
td上加position: relative在 Safari 和多数安卓 WebView 中被忽略（非块级元素不触发定位上下文） -
::after的bottom: 0实际参照的是table的底部，而非当前单元格 - 缩放后的伪元素尺寸计算受
border-collapse影响，collapse模式下边框合并逻辑会干扰伪元素的top/left偏移
真正能用的表格1px边框写法
绕过 td 定位限制，把伪元素挂载到可稳定定位的父容器上：用 tr 承载底部边框，用 table 承载外边框，所有伪元素统一用 transform-origin: 0 0 锚定左上角。
- 单行底边框：
tr设position: relative，tr::after画height: 2px+transform: scaleY(0.5)+bottom: 0 - 四边外框：
table设position: relative，table::before用top: 0; left: 0; right: 0; bottom: 0; width: 200%; height: 200%+transform: scale(0.5)+box-sizing: border-box - 必须加
pointer-events: none，否则表格行点击区域被遮挡 - 避免
border-collapse: collapse与伪元素混用；如需合并内边线，改用border-collapse: separate+border-spacing: 0
DPR=3 设备下表格边框仍显粗怎么办
scaleY(0.5) 只对 DPR=2 有效；DPR=3 时需缩放至 0.333，但 Safari 对 scaleY(0.333) 渲染不稳定，容易插值模糊。此时别硬调 transform，换更鲁棒的兜底：
- 用
box-shadow: 0 1px 1px -1px rgba(0,0,0,0.3)模拟下边框（仅限单边） - 用
background: linear-gradient(to bottom, #ccc 50%, transparent 50%)铺满tr底部 1px 区域（无缩放、无定位依赖） - 媒体查询必须写双条件：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)，只靠 JS 注入 class 无法覆盖首屏渲染
最易被忽略的是：表格内容若含 font-size 缩放或 transform: scale()，会二次影响伪元素缩放结果，导致边框错位。真机调试时务必关掉 Chrome 的“Emulate DPR”再连 Safari Web Inspector 看渲染层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
