Почему границы моего флексбокса не совпадают при переключении экранов? ⇐ CSS

[Anonymous]

Я работаю над приложением, которое позволяет пользователям моделировать структуру веб-сайта. В режиме перетаскивания приложение показывает соединительные линии, чтобы сделать структуру дерева сайта более понятной. Я использовал границы div для создания соединительных линий, что было сопряжено с некоторыми сложностями, но в конечном итоге мне удалось уладить все изгибы. По крайней мере, я так думал!
Потом я обнаружил, что, когда я переключаюсь с внешнего монитора на экран ноутбука, соединительные линии не совсем совпадают — см. снимки экрана ниже.


Вот крупный план, показывающий несовпадение на экране моего ноутбука:


Если я изменю левое поле определенного класса div с -3px на -2px (см. фрагмент CSS ниже), это исправляет выравнивание на экране моего ноутбука, но затем границы на мониторе моего настольного компьютера смещаются на 1 пиксель в направлении другое. Мне нужно, чтобы эти соединительные линии выглядели прямо на всех экранах!

Код: Выделить всё

/*Here's some of the key CSS involved: */
.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;
/* extend outside boundaries to touch twisty to the right */
flex: none;
width: 42px;
/* 35px width + 7px overflow */
height: 26px;
}

#site-tree.in-drag-and-drop-mode .node:last-child>.node-title-row>.connector-to-parent-node {
margin-left: -3px;
/* needs to be -2px on laptop screen, -3px on external monitor */
width: 45px;
/* 35px width + 3px + 7px */
border-left: 3px solid #AAA;
}

Код: Выделить всё

Contact Us

Кто-нибудь сталкивался с подобной проблемой раньше? Имеет ли это какое-то отношение к масштабированию экрана?
Вот единственная подсказка, которую мне удалось найти: когда я проверяю div «соединитель-родительский-узел» на обоих экранах, появляется разница. На внешнем мониторе левая граница имеет ширину 3 пикселя, как указано в моей таблице стилей. На экране моего ноутбука браузер необъяснимым образом сжимает границу до ширины 2,4 пикселя. Что с этим случилось?



Подробнее здесь: https://stackoverflow.com/questions/796 ... ch-screens