如何移除部分屏幕尺寸下出现的1px伪边框问题？

这是Chrome在特定缩放比例或屏幕尺寸下的亚像素渲染bug——当元素的位置/宽度经过缩放计算后不是整数像素时，浏览器会进行插值处理，导致下层背景的颜色从边缘透出来，DevTools里看尺寸没问题是因为它显示的是逻辑像素，不是实际渲染的物理像素。

以下是几个实测有效的解决办法：

方法1：添加同色内阴影 #

给白色横幅加1px的内阴影，颜色和自身背景一致，刚好覆盖透出的黑边，不影响布局：

<div style="width: 500px; height: 300px; position: relative; background-color:black;">
  <div style="
          width: 100%;
          height: 60px;
          background-color: rgb(250,250,250);
          position: absolute;
          bottom: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: inset 0 0 0 1px rgb(250,250,250);
      ">
    Text
  </div>
</div>

方法2：触发GPU加速 #

用transform: translateZ(0)触发GPU渲染，改变Chrome的渲染路径，绕过亚像素计算的bug：

<div style="width: 500px; height: 300px; position: relative; background-color:black;">
  <div style="
          width: 100%;
          height: 60px;
          background-color: rgb(250,250,250);
          position: absolute;
          bottom: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          transform: translateZ(0);
      ">
    Text
  </div>
</div>

方法3：微调宽度和位置 #

把白色横幅的宽度设为calc(100% + 2px)，然后左移1px，让它左右各多出1px覆盖下层背景：

<div style="width: 500px; height: 300px; position: relative; background-color:black;">
  <div style="
          width: calc(100% + 2px);
          height: 60px;
          background-color: rgb(250,250,250);
          position: absolute;
          bottom: 0px;
          left: -1px;
          display: flex;
          justify-content: center;
          align-items: center;
      ">
    Text
  </div>
</div>

方法4：添加同色轮廓 #

用outline属性，它不占据布局空间，1px的同色轮廓能直接覆盖边缘漏出的黑色：

<div style="width: 500px; height: 300px; position: relative; background-color:black;">
  <div style="
          width: 100%;
          height: 60px;
          background-color: rgb(250,250,250);
          position: absolute;
          bottom: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          outline: 1px solid rgb(250,250,250);
      ">
    Text
  </div>
</div>

内容的提问来源于stack exchange，提问作者Minty