Javascript 根据操作系统分辨率和CSS位置的不同，会出现微小的空间

我正在用border和嵌套div进行布局

这些div标签有自己的背景色，可以通过按键移动

它似乎工作正常，但当我更换笔记本电脑时，div标签之间会出现1px的空间

原因是操作系统的规模和分辨率发生了变化，但不知道如何解决这个问题

我不想在任何操作系统的规模和分辨率空间

---

下面是示例代码

如果按键移动长方体，空间有时会出现，有时会消失

有没有办法解决这个问题

这个问题发生在Chrome中，而不是IE11中

---

这是我的环境

环境工作正常

• 操作系统：Windows10
• 显示分辨率：1366 x 768
• 显示比例：100%

环境不起作用

• 操作系统：Windows10
• 显示分辨率：1920 x 1080
• 显示比例：125%

---

---

我不能发表评论，所以我会写一个答案作为建议： 这是肮脏的黑客，但你可以尝试使用轮廓，而不是边框，增加1px的边距，并减少宽度和高度各2px。我想它不会改变你们的布局，问题似乎已经解决了

.box{
    position: absolute;
    top: 0;
    left: 0;
    height: 198px;
    width: 198px;
    background: orange;
    outline: 1px solid black;
    margin: 1px;
}

---

我不能发表评论，所以我会写一个答案作为建议： 这是肮脏的黑客，但你可以尝试使用轮廓，而不是边框，增加1px的边距，并减少宽度和高度各2px。我想它不会改变你们的布局，问题似乎已经解决了

.box{
    position: absolute;
    top: 0;
    left: 0;
    height: 198px;
    width: 198px;
    background: orange;
    outline: 1px solid black;
    margin: 1px;
}

---

奇怪的是，当您将

.box

的

边框值设置为偶数时，问题并没有出现appear@marco_autiero它可能会改变布局，不是吗？有没有办法保持边框宽度与现在一样？奇怪的是，当您将
.box
的
边框值设置为偶数时，问题就没有了appear@marco_autiero它可能会改变布局，不是吗？有没有办法保持现在的边界宽度不变？