边界和内容之间的不固定差距
Inconstant gap between border and content
我在使用带有边框的简单容器时遇到问题:容器边框和内容之间的任何边缘随机出现一个小间隙,当此内容具有背景时可见。这个片段总结得非常快:
.container {
width: 100px;
height: 50px;
border: 2px solid black;
background: yellow;
margin-bottom: 5px;
}
.leftBox {
width: 30%;
height: 100%;
background: red;
}
<div class="container">
<div class="leftBox"></div>
</div>
<div class="container">
<div class="leftBox"/></div>
</div>
<div class="container">
<div class="leftBox"/></div>
</div>
<div class="container">
<div class="leftBox"/></div>
</div>
这是我用 Chrome 得到的结果的图片,以防问题与浏览器有关:
知道我为什么会得到这个结果吗?任何解决方法?谢谢
编辑:我发现我在任何浏览器上都得到了相同的结果,但只在我的笔记本电脑屏幕上:如果我在另一台设备上显示网页,就不会再有间隙了!这是什么魔法?
编辑:问题是由 Windows 缩放引起的,因此与我写的 css 无关。请参阅下面的答案。
刚刚找出问题出在哪里:两个屏幕,相同的分辨率,不同的结果。屏幕之间的唯一区别是 Windows 在我的笔记本电脑屏幕上将比例设置为 125%。当我将其重置为 100% 时,问题消失了。奇怪的行为!我想没有解决方法,只会让 Windows 缩放激活的人失望...
我在使用带有边框的简单容器时遇到问题:容器边框和内容之间的任何边缘随机出现一个小间隙,当此内容具有背景时可见。这个片段总结得非常快:
.container {
width: 100px;
height: 50px;
border: 2px solid black;
background: yellow;
margin-bottom: 5px;
}
.leftBox {
width: 30%;
height: 100%;
background: red;
}
<div class="container">
<div class="leftBox"></div>
</div>
<div class="container">
<div class="leftBox"/></div>
</div>
<div class="container">
<div class="leftBox"/></div>
</div>
<div class="container">
<div class="leftBox"/></div>
</div>
这是我用 Chrome 得到的结果的图片,以防问题与浏览器有关:
知道我为什么会得到这个结果吗?任何解决方法?谢谢
编辑:我发现我在任何浏览器上都得到了相同的结果,但只在我的笔记本电脑屏幕上:如果我在另一台设备上显示网页,就不会再有间隙了!这是什么魔法?
编辑:问题是由 Windows 缩放引起的,因此与我写的 css 无关。请参阅下面的答案。
刚刚找出问题出在哪里:两个屏幕,相同的分辨率,不同的结果。屏幕之间的唯一区别是 Windows 在我的笔记本电脑屏幕上将比例设置为 125%。当我将其重置为 100% 时,问题消失了。奇怪的行为!我想没有解决方法,只会让 Windows 缩放激活的人失望...