Chrome缩放至110%时HTML表格制作弹窗出现单元格间隙问题

问题表现 #

• 实现逻辑：使用HTML+CSS的table元素搭建带左侧三角箭头的弹窗，两个相邻表格单元格分别放置CSS三角箭头、对话框主体
• 触发条件：仅在Chrome浏览器将页面缩放比例调整为110%时，箭头与对话框主体之间出现明显可见的黑色间隙
• 已做的排查配置：
  • 表格设置border-spacing: 0、无额外边框，单元格设置零内边距
  • 箭头三角元素通过border-width: 10px 12px 10px 0 !important强制指定右边界宽度（三角的横向视觉宽度完全来自这个右边界）
  • 开发者工具计算面板显示，缩放场景下指定的border-right-width实际计算值为11.9886px，和预期设置的12px存在亚像素渲染偏差，是间隙产生的直接原因，哪怕加了!important也没法消除这个偏差

可复现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }
        table {
            border-spacing: 0px;
            box-sizing: border-box;
            border: none;
        }
        td {
            padding: 0px;
        }
        .box {
            width: 200px;
            height: 100px;
            background: white;
        }
        .arrow-left {
            width: 0;
            height: 0;
            left: 0;
            border-right-color: white;
            border-width: 10px 12px 10px 0 !important;
            border-color: transparent;
            border-style: solid;
        }
    </style>
</head>
<body>
    <table class="tableCustom">
        <tr>
            <td>
                <div class="arrow-left" style="border-right-color:white"></div>
            </td>
            <td>
                <div class="box"></div>
            </td>
        </tr>
    </table>
</body>
</html>

异常效果截图 #

问题根因与修复方案 #

根因 #

这是Chrome在非100%缩放场景下的经典亚像素渲染问题：渲染引擎会对固定像素值做精度折算，哪怕硬写了12px的边框宽度，缩放后也会算出11.98px这类带小数的数值。配合表格单元格独立渲染的拼接逻辑，最后就会漏出底层的黑色背景，形成肉眼可辨的缝隙。

修复方式 #

• 最省事的临时修复：给相邻的表格单元格添加微量负边距，在全局td样式中补充margin-right: -1px，让单元格之间产生微量重叠，不管亚像素怎么折算，都能覆盖掉漏出的缝隙
• 一劳永逸的修复：替换表格布局为Flex弹性布局，放弃table结构，用横向flex排列实现箭头与对话框的拼接。Flex对缩放场景下的亚像素处理比表格稳定得多，基本不会出现这类拼接缝隙
• 针对性数值修复：把箭头的右边界宽度从12px调整为12.1px，利用Chrome的渲染取整逻辑，让缩放后的折算值刚好达到12px的视觉宽度，补上差的那0.01px的宽度偏差

内容的提问来源于stack exchange，提问作者Pradeep Ragav