Flexbox布局跨屏幕时连接线边框对齐异常的解决方案求助

大家好，我最近在开发一款支持用户快速搭建网站结构原型的应用，其中拖拽模式下会显示层级连接线，帮用户更清晰地看懂站点树的结构。我用CSS边框来实现这些连接线，本来以为已经把所有细节都调通了，结果遇到了一个非常棘手的问题：

当我在外接显示器和笔记本屏幕之间切换时，这些连接线的对齐总是出问题——在外接显示器上显示笔直的线条，到了笔记本屏幕就会错位；反过来调整CSS适配笔记本后，外接屏上的线条又会歪1像素。

具体问题表现 #

• 外接显示器上，我把.node:last-child>.node-title-row>.connector-to-parent-node的margin-left设为-3px时，连接线完全对齐；但切换到笔记本屏幕，这里必须改成-2px才能让线条变直，此时在外接屏上又会反向错位1像素。
• 我用开发者工具检查还发现了一个诡异的点：外接屏上这个元素的左边框是我设置的3px，但笔记本屏幕上浏览器居然把它渲染成了2.4px宽！

关键CSS代码 #

/* 核心相关样式 */
.node-title-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

#site-tree.in-drag-and-drop-mode .node {
  border-left: 3px solid #AAA;
}

#site-tree.in-drag-and-drop-mode .node:last-child {
  border-left: 3px solid transparent;
}

#site-tree.in-drag-and-drop-mode .node>.node-title-row>.connector-to-parent-node {
  border-bottom: 3px solid #AAA;
  margin-right: -7px; /* 延伸到右侧的折叠按钮位置 */
  flex: none;
  width: 42px; /* 35px 宽度 + 7px 溢出部分 */
  height: 26px;
}

#site-tree.in-drag-and-drop-mode .node:last-child>.node-title-row>.connector-to-parent-node {
  margin-left: -3px; /* 笔记本屏幕需要改成-2px，外接屏用-3px */
  width: 45px; /* 35px 宽度 + 3px + 7px */
  border-left: 3px solid #AAA;
}

节点HTML结构 #

<div class="node selected open" data-node-id="420">
  <div class="node-title-row">
    <div class="connector-to-parent-node"></div>
    <div class="twisty"></div>
    <div class="connector-to-icon-and-title"></div>
    <div class="node-icon-and-title">
      <div class="node-icon"><span class="far fa-file" aria-hidden="true"></span></div>
      <div class="node-title">Contact Us</div>
    </div>
  </div>
  <div class="child-nodes" data-parent-node-id="420">
    <!-- 子节点内容 -->
  </div>
</div>

我怀疑这和屏幕缩放设置有关，但不知道具体该怎么调整才能让连接线在所有显示器上都保持笔直对齐。有没有哪位朋友遇到过类似的问题？求指点！

内容来源于stack exchange