在某些分辨率下带边框元素的位置中断

Question

我制作了一个弯曲的选项卡列表，一切看起来都不错，但是问题在于某些分辨率会破坏一个像素的位置，我真的想知道为什么这在技术上会发生吗？以及如何避免这种情况？

#tabs ul li {
  display: inline-block;
  padding: 0 10px 0 10px;
  border: 1px solid gray;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  height: 40px;
  position: relative;
  line-height: 40px;
  top: 5px;
  margin: 0 -5px 0 0;
  min-width: 100px;
}

.active {
  border: 1px solid #0061ff !important;
  height: 50px !important;
  line-height: 50px !important;
  border-bottom: none !important;
  top: 0px !important;
}

#tabcontent {
  width: 200px;
  height: 200px;
}

#tab {
  border: 1px solid #0061ff;
  margin-top: 75px;
  border-radius: 10px;
}

#tabs {
  margin-top: -68px;
}

.invRadTab1 {
  width: 35px;
  height: 10px;
  background: white;
  position: absolute;
  bottom: -3px;
  left: -33px;
  z-index: 9999999;
  overflow: hidden;
}

.invRadTab2 {
  width: 35px;
  height: 10px;
  background: white;
  position: absolute;
  bottom: -3px;
  right: -33px;
  z-index: 9999999;
  overflow: hidden;
}

.invRadTab1 span {
  width: 60px;
  height: 20px;
  background: #fff;
  position: absolute;
  bottom: 2px;
  right: 2px;
  border: 1px solid #0061ff;
  border-radius: 0 0 10px 0;
  border-top: none;
  border-left: none;
  position: absolute;
}

.invRadTab2 span {
  width: 60px;
  height: 20px;
  background: #fff;
  position: absolute;
  bottom: 2px;
  left: 2px;
  border: 1px solid #0061ff;
  border-radius: 0 10px 0 10px;
  border-top: none;
  border-right: none;
  position: absolute;
}
li.active::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    bottom: -2px;
    left: 0;
}

<div id="tab">
  <div id="tabs">
    <ul>
      <li><a>Tab 2</a></li>
      <li class="active"><a>Tab 1</a><span class="invRadTab1"><span></span></span><span class="invRadTab2"><span></span></span>
      </li>
      <li><a>Tab 3</a></li>
      <li><a>Tab 4</a></li>
    </ul>
  </div>

  <div id="tabcontent">
    some content
  </div>
</div>

如果您想看到此问题，则应在整个页面中运行此代码段，然后进行放大或缩小（对我来说是125％和90％），我的屏幕是1920，另一台机器是1366，我没有可以看到1920分辨率的任何问题，但也可以在其他屏幕上看到1366分辨率的此中断。我该如何解决这个问题？