CSS：在WebKit浏览器中，如何在放大时排列绝对定位的对象？

Question

在最新版本的Chrome和Safari中测试过。在100％变焦时，这5个盒子的右边框完美排列。在几乎任何其他缩放级别，其中至少有一个不会水平或垂直排列。

请指出任何可能的黑客攻击，变通办法或其他想法。我对任何黑客都开放！在这种特殊情况下，让几个物体无缝排列比它们的精确位置和尺寸更重要。

（我实际上要做的就是将两个盒子粘在一起，制成类似'L'形状的东西，周围有边框，以防出现其他想法。

<style>
.boxes div {
  position: absolute;
  height: 40px;
  border-right: 3px solid #009;
}
</style>
<div class="boxes">
  <div style="top: 0px; left: 0px; width: 200px;">1</div>
  <div style="top: 40px; left: 100px; width: 100px;">2</div>
  <div style="top: 80px; left: 160px; width: 40px;">3</div>
  <div style="top: 120px; left: 185px; width: 15px;">4</div>
  <div style="top: 160px; left: 191px; width: 9px;">5</div>
</div>