缩小时，边框会导致边框和内容之间出现间隙答案

【问题标题】：Border causes a gap in between border and content when zoomed out缩小时，边框会导致边框和内容之间出现间隙
【发布时间】：2020-01-14 21:52:20
【问题描述】：

我正在尝试创建一个带边框的外部 div，并在内部创建一个包含动态高度的内容的 div。问题是缩小时，顶部会出现一些随机空格（在 chrome 浏览器上为 67%）。

如何解决这个问题？（背景颜色必须保持白色，不能使用绝对位置） js 小提琴：http://jsfiddle.net/Arminaspam/djpervLh/13/

    border-radius: 13px;
    box-shadow: -20px 20px #f6f5f7;
    margin: 20px auto;
    padding: 0;
    text-align: left;
    width: 266px;">
    <div style="background-color: white;
    border-radius: 13px;
    border: 2px solid #0048c1;">
        <div style="
    border-radius: 10px;
    color: #fff;
    padding: 15px;
    background-color: #0048c1;">
            <div>
                Text that might be longer and take a dynamic amount of height in it
            </div>
        </div>
    </div>
</div>```

【问题讨论】：

我认为这只是在不同缩放级别计算和绘制元素的方式的一个怪癖。我在类似的情况下也注意到了这一点，尤其是当你处于一个奇怪的缩放级别时，比如 67%（实际上是 66.6666...%）。看看这是否有帮助：stackoverflow.com/questions/57000175/…
在你的情况下，你为什么还需要额外的白色 div？你不能给你的蓝色 div 添加一个白色边框吗？
我也没有看到让 div 带有蓝色边框和白色背景的意义。似乎它只是使代码过于复杂，从而产生了问题。你到底想用蓝色 div 做不到的 div 来实现什么？
我正在尝试制作手风琴，带有蓝色边框的 div 应该将其包裹起来。我们只看到蓝色背景 div 没有展开，但是当实现 ti 时，它仍然会在顶部或侧面造成奇怪的间隙。

标签： html css google-chrome

【解决方案1】：

chrome 以一种奇怪的方式渲染 broders，为了解决这个问题，我使用了 box-shadow: 0px 0px 0px 2px #3d3691, -20px 20px 0 0 #f6f5f7 作为边框，这不会因不同的缩小值而出错

【讨论】：