iOS Safari中border-collapse: collapse下虚线断续是高DPI+亚像素渲染导致的视觉失真，非bug；应避免0.5px/1px dashed，改用2px dashed并统一单元格边框样式，禁用table自身边框，悬停时只改color不改width/style。
border-collapse: collapse 在 iOS Safari 上边框变虚或断续？
这不是 bug，是高 DPI 屏幕 + 亚像素渲染共同导致的视觉失真。iOS Safari（尤其是 iPad Pro 和 iPhone 14+）默认用 sub-pixel 抗锯齿绘制 border，当边框宽度为 1px 且样式为 solid 时，虚线（dashed）、点线（dotted）极易被模糊、拉伸或跳帧，看起来像“断掉”或“半透明”。
- 别用
0.5px或1pxdashed—— iOS Safari 会直接降级为实线或渲染不稳定 - 改用整数宽度：优先尝试
2px dashed #999，在 Retina 屏上更稳定 - 避免对整个
table应用transform: scale()或zoom，缩放会破坏虚线节奏，哪怕只是scale(0.99) - 如果必须兼容旧版 Safari（iOS 12–14），可加媒体查询兜底：
@supports (-webkit-appearance: none) and (not (color: color(display-p3 1 1 1))) {<br> td, th { border-style: solid; }<br>}
为什么加了 border-collapse: collapse 还是看到双线或虚影？
因为 border-collapse: collapse 只控制“是否合并”，不控制“如何渲染”。若你给 td 设了 1px dashed，又给 table 设了 1px solid，两者在 collapse 模式下会按“宽 > 样式 > 颜色”规则竞争——solid 优先级高于 dashed，结果就是部分边框被覆盖成实线，其余残留虚线段，形成“虚实混搭”的错觉。
- 统一边框样式：所有
td、th、table的border-style必须一致，比如全设为dashed - 禁用 table 自身边框：显式写
table { border: none; }，只靠单元格边框撑出内线 - 检查 computed 样式里
border-top-style是否真为dashed——某些 CSS 重置库（如 normalize.css）会把table的border-style设为hidden，直接屏蔽所有边框
移动端 hover 边框变色后线条发虚怎么办？
悬停时改 border-color 本身不会导致发虚，但如果你初始边框是 1px dashed transparent，而悬停目标是 1px dashed #007bff，在 iOS 上透明边框的亚像素占位仍存在，颜色切换瞬间会触发重绘抖动，放大虚影感。
- 初始状态别用
transparent，改用和背景色一致的实色，例如border: 2px dashed #f5f5f5 - 悬停时只换颜色，不改宽度或样式：
td:hover { border-color: #007bff; } - 加
backface-visibility: hidden到td上，强制硬件加速，减少 iOS 渲染毛刺 - 真要保虚线交互，建议放弃纯 CSS
:hover，改用 JS 添加 class，并在 class 中启用outline或box-shadow模拟高亮（outline不参与边框合并，无冲突）
最麻烦的不是虚线本身，而是它在不同设备上“有时清晰、有时断续”的不可预测性。与其反复调 border-width 和 dash-size，不如先确认：你是否真的需要虚线？多数表格场景中，1px solid #e0e0e0 配合足够 padding 和 subtle hover，比强行维持虚线更稳、更可读。
立即学习“前端免费学习笔记（深入）”；
