Windows系统150%缩放场景下表格边框重叠、粗细不一问题如何修复

解决方案 #

这个问题的根源是Windows高DPI缩放场景下，border-collapse: collapse 合并相邻边框时，浏览器对像素的取整计算出现偏差，导致不同位置边框渲染厚度不一致。以下是经过验证的可行方案：

方案1：拆分边框避免重复渲染（兼容性最好）

放弃合并边框规则，让所有边框仅渲染一次，从根源避免重叠计算误差：

table {
    border-collapse: separate;
    border-spacing: 0;
    /* 仅绘制表格最外层的上、左边框 */
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
table td {
    /* 仅绘制单元格的下、右边框，所有边框无重叠 */
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 8px 12px;
}

该方案兼容性覆盖所有主流浏览器，150%缩放场景下边框粗细完全一致，视觉效果和原需求完全匹配。

方案2：使用box-shadow模拟边框（实现最简单）

用外发光阴影替代原生边框，浏览器对box-shadow的高DPI渲染精度远高于border，不会出现取整偏差：

table {
    border-collapse: collapse;
}
table td {
    border: none;
    box-shadow: 0 0 0 1px #ddd;
    padding: 8px 12px;
}

该方案代码改动最小，仅需替换边框属性即可，效果和原生边框完全一致。

方案3：高DPI适配（针对多缩放场景优化）

如果需要适配多种缩放比例，可以结合dppx媒体查询动态调整边框宽度，保证不同缩放比例下的边框物理像素一致：

table {
    border-collapse: collapse;
}
table td {
    border: 1px solid #ddd;
}
/* 150%缩放（1.5dppx）场景 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    table td {
        border-width: 0.666px;
    }
}
/* 200%缩放（2dppx）场景 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    table td {
        border-width: 0.5px;
    }
}

内容的提问来源于stack exchange，提问作者Riza Maryam Solina