div 内部的 div 在特定分辨率/缩放级别上溢出边框

Question

.border {
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px #d43f3a solid;
}
.header {
      padding: 10px;
    background: #f1f1f1;
    border-bottom: 1px #ccc solid;
}
.content {
  padding: 10px;
}

<div class="border">
<div class="header">
   non erat euismod convallis vel id libero. Vivamus vel lectus hendrerit, sagittis diam eu, euismod dui. Curabitur quis leo et tellus pharetra tristique ac sit amet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non turpis risus. Duis vel scelerisque enim. Ut dapibus ut enim ac tempus. Sed sit amet tortor lorem. Vestibulum tincidunt est odio, eu volutpat lacus commodo at. Etiam dapibus nisl ut tempor ultricies. Donec rutrum facilisis purus at al
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt ultrices venenatis. Nulla sed ex non erat euismod convallis vel id libero. Vivamus vel lectus hendrerit, sagittis diam eu, euismod dui. Curabitur quis leo et tellus pharetra tristique ac sit amet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non turpis risus. Duis vel scelerisque enim. Ut dapibus ut enim ac tempus. Sed sit amet tortor lorem. Vestibulum tincidunt est odio, eu volutpat lacus commodo at. Etiam dapibus nisl ut tempor ultricies. Donec rutrum facilisis purus at aliquet.
</div>
</div>

乍一看，它看起来完全正常，但是当您继续放大时(在我的 4k 屏幕上，在 chrome 中缩放级别为 150%(，标题div 旁边的右边框变得与其他边框不同。

我做了一个截图，它对我来说是什么样子的：https://i.stack.imgur.com/WabXv.png

现在，如果我将 overflow: hidden 添加到 border 类中，这是可以修复的，但是任何会溢出div 的内容都不会显示(显然(。例如，通过javascript插入的自定义选择

有没有办法解决这个问题？没有overflow: hidden

Answer 1

让我们尝试margin:0 1px .header

Answer 2

此代码可以解决您的问题，但请确保边框宽度为 1px 固定，如果要更改边框宽度，您可以删除边框宽度：薄到边框：2px 纯红色; 等等。

.border {
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px #d43f3a solid;
    border-width: thin;
}