html - div 元素和它在 chrome 中自己的边框之间的垂直线

Question

我指定了一个带有底部边框的 div 元素，使用与 div 本身相同的颜色，以创建背景图像的垂直不对称放置。然而，在 div 和它的边框之间出现了一条非常细的线(元素和它的边框的颜色为#141414，1px 宽的线是#2c2c2c)。

Chrome 开发者工具表示该行不存在，但无论如何都可见。该问题在 Firefox 或 Internet Explorer 中不存在，并且仅在某些窗口宽度下出现，在其他窗口中不存在，但在不同的亮度下出现。

它仅在我在背景上使用 padding-box 时出现。

html

<div id="titleBlock">Title Text</div>

CSS

#titleBlock {
    background: url("logo2.svg") center center no-repeat #141414 padding-box;
    width: 100%;
    height: 9.25vw;
    text-align: center;
    color: #DCDCDC;
    font-size: 3.3vw;
    padding-top: 20.75vw;
    font-weight: 300;
    border-bottom: #141414 solid 3vw;
}

有没有其他人经历过这种情况或知道解决方案而不创建第二个 div 来表示底部边框？

Answer 1

额外的 0.25% 的 View 宽度对您来说有多重要？

我通过将 padding top: 20.75vw 更改为 padding-top: 21vw 使其在 Chrome 中消失。