在特定浏览器宽度下，白线出现在渐变填充div的末尾

Question

我有一个ID为#gradient_div且其background-image设置为linear-gradient的div。仅在某些浏览器窗口宽度下，线性渐变的末尾与div #gradient_div的末尾之间才出现缝隙。当我拉伸和收缩浏览器窗口时，这条白线消失并重新出现。

似乎与边距有关：

• 当我将边距设置为margin: 0 1%;时，出现while行 在特定的窗口宽度。

  在窗口宽度结束时，在 1％处出现白线 68-92 ex的范围：4 68 px-4 92 px，5 68 px -5 92 px， 6 68 px-6 92 px等。

  对于其他边距左右百分比，该行显示在这些页面上 宽度：

  • 2％：页面宽度在92-_04和42-54之间结束

  • 3％：页面宽度在34-41、67-74和00-08范围内结束

  • 30％：页面宽度以5或8结尾

当我只是将背景设置为与渐变相反的颜色（例如background: blue;或将background-image设置为图像时，没有没有白线问题 ; 更新当以px为单位设置边距时也不会发生。

欢迎解决此问题的建议，但是我最想了解为什么这行正在发生。是什么原因造成的？

    #gradient_div{
    background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86) , rgb(152, 4, 228));
    height: 100px;
    margin: 0 1%;
    border: 1px solid black;
    }

<div id="gradient_div"></div>

Answer 1

为了避免这种情况，我会稍微增加背景尺寸：

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: 101% 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

您也可以尝试仅添加1px，它可能少于1%

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: calc(100% + 1px) 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>