更改一个div的边框宽度，而是更改下一个div的边框宽度

Question

我遇到了这个奇怪的错误＆＃34;在尝试不同的小数边框宽度时。它们实际上非常有趣，但为什么更改第一个div的边框（在我的情况下为0.09px），会更改第二个div的边框？

我创建了两对div来展示它：

＆＃13;

＆＃13;

[id^=border]{
  width:100px;
  height:33px;
  padding:10px;
  border-radius:15px;
}
#border1{
  border:1.4px solid black;
}

#border2{
  border:1.6px solid black;
}

#border3{
  border:1.49px solid black;
}

#border4{
  border:1.6px solid black;
}

＆＃13;

<div id="border1">bordered div 1</div><br>
<div id="border2">bordered div 2</div><br>

<hr>

<div id="border3">bordered div 3</div><br>
<div id="border4">bordered div 4</div><br>

＆＃13;

＆＃13;

＆＃13;

第一个div的边框宽度为1.4px，第二个div的边长为1.6px。

然后，我将第一个div的边界更改为1.49px，它似乎并没有真正影响这个div，这并不奇怪，因为0.09px是一个非常小的值。然而，第二个div的边框宽度发生了很大的变化。

也许只是在Safari上发生，这是截图：

  

为什么会这样？