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旁边的右边框就会变得与其他div不同。

我做了一个屏幕截图，它看起来像我：https://imgur.com/mOvnFVQ.png

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

插入的定制选择

是否可以解决此问题？没有overflow: hidden

Answer 1

让margin:0 1px div尝试.header

Answer 2

此代码可以解决您的问题，但是请确保边框宽度固定为1px，如果要更改border-width，可以将border-width：thin更改为border：2px实心红色；等等。

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

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

2 个答案: