我正在制作带有边框和嵌套div 的布局。
这些div 标签有自己的背景颜色，可以通过按键移动。
它似乎工作正常，但是当我更换笔记本电脑时，div 标签之间会出现 1px 空间。
问题图像
原因是操作系统规模和分辨率更改，但不知道如何解决此问题。
我不想在任何操作系统比例和分辨率下腾出空间。
示例代码如下。
https://jsfiddle.net/2cdr5yun/2/
如果按键移动框，有时空间会出现，有时会消失。
有什么办法解决这个问题吗？
此问题发生在 Chrome 中，而不是在 IE11 中。
这是我的环境。
-
环境工作正常
- 操作系统： 视窗10
- 显示分辨率： 1366 x 768
- 显示比例：100%
-
环境不工作
- 操作系统： 视窗10
- 显示分辨率： 1920 x 1080
- 显示比例：125%
<body>
<div class="box" id="box">
<div class="inner"></div>
</div>
</body>
body{
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: orange;
border: 1px solid black;
}
.inner{
background: blue;
height: 100%; /* same result in 200px */
width: 100%; /* same result in 200px */
}
我不能发表评论，所以我会写一个答案作为建议： 这是肮脏的黑客，但您可以尝试使用轮廓而不是边框，添加 1px 的边距，并将宽度和高度分别减少 2px。我想它不会改变你的布局，问题似乎消失了。
.box{
position: absolute;
top: 0;
left: 0;
height: 198px;
width: 198px;
background: orange;
outline: 1px solid black;
margin: 1px;
}
https://jsfiddle.net/43bz2s9r/3/