最稳方案是优先用gap控制拼接间隙，若需兼容旧浏览器则用transform: translatex(-1px)替代负margin，并配合position: relative和z-index确保hover时边框正确覆盖；本质是手动划分边框归属权而非简单删减。
大屏幕拼接布局中边框重叠变粗，本质是多个相邻元素各自渲染完整边框，在像素对齐边界处视觉叠加——这不是 bug，而是盒模型和渲染规则的必然结果。直接删边框或硬设 border: none 会破坏 hover 状态一致性，最稳路径是控制“谁画哪条边”+“谁压谁”。
用 gap 替代负 margin（Flex/Grid 布局优先）
如果你的拼接容器是 display: flex 或 display: grid，gap 是首选：它不触发重排、不影响焦点流、语义清晰。
-
gap只作用于子项之间，不会让边框接触，自然避免重叠；写法如.screen-grid { display: grid; gap: 2px; } - 注意 Safari 14.1+ 才支持 Flex 中的
gap，旧版需降级；IE 全系不支持，必须 fallback - 别在
gap和margin混用：比如父容器设了gap: 2px，子项又写margin-left: -1px，会导致间隙错乱甚至内容溢出 - 如果拼接单元有固定尺寸（如 1920×1080），
gap值建议用整数 px，避免高 DPR 下 sub-pixel 渲染导致虚边
负 margin 必须配 position: relative + z-index
当必须用负 margin（例如兼容 IE 或 legacy 系统），只加 margin-left: -1px 不够——hover 时后一个元素会盖住当前边框，出现“跳变”。
- 所有拼接项都要加
position: relative，否则z-index无效 - hover 时仅改
border-color，禁止动border-width或border-style，否则触发 layout shift - 推荐写法：
.screen-item { position: relative; border: 1px solid #666; } .screen-item:hover { z-index: 2; border-color: #007bff; } - 若拼接方向是纵向，用
margin-top: -1px，并确保父容器overflow: visible（默认即可）
border-collapse: collapse 仅对 <table> 有效
<p>别在 div 或 flex 容器上写 <code>border-collapse: collapse——它会被浏览器完全忽略。这个属性只对 <table> 元素生效，且必须直接设在 table 标签上。
<ul><li>验证是否生效：打开 DevTools → Elements 面板 → 选中 <code><table> → 查 <code>computed 样式里 border-collapse 是否为 collapse
border-spacing 失效，别再写它<th> 设 <code>border-bottom: 2px solid #333，<td> 设 <code>border-top: 1px solid #999，最终显示的是 2px #333
<table> 都要单独设 <code>border-collapse: collapse，不继承
高 DPR 屏幕下负 margin 失效怎么办
iPhone Retina、Windows 高缩放比设备上，margin-left: -1px 可能被放大成 -1.25px 或 -1.5px，导致覆盖过量或不足，点击热区偏移。
- 用
transform: translateX(-1px)替代margin-left: -1px，它不受缩放影响，且是合成层操作，性能更好 - 测试必须开 DevTools 的 “Toggle device toolbar”，选真实设备型号（如 iPhone 14 Pro），不能只调窗口尺寸
- 如果拼接单元含文字，iOS Safari 可能强制放大整个块以满足最小 44px 点击区，间接撑开间距——加
min-height: 44px并设touch-action: manipulation可缓解 - 圆角交界处可能有像素错位：统一设
border-radius: 0，或对拼接容器加overflow: hidden裁切
真正卡住人的从来不是“怎么让边框变细”，而是没意识到边框归属权要手动划分——先决定“左边归 A 画、右边归 B 画”，再用 gap、transform 或 z-index 去执行，比反复调 margin 和 border 省力得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
