Chrome浏览器中奇数尺寸边框出现异常白色像素线求助

问题现象 #

当给.product设置奇数像素的黑色边框（比如border: 5px solid black;）时，ADD TO CART按钮的底部和左侧会出现奇怪的白线条，换成偶数像素边框就消失，且仅在Chrome浏览器中出现。

原因分析 #

这是Chrome浏览器的亚像素渲染bug：奇数像素边框在计算元素边缘对齐时，会产生细微的渲染偏差，导致按钮与容器边框之间出现视觉上的空白线。

可行解决方案 #

• 触发GPU加速修正渲染：给.product添加transform: translateZ(0)，强制浏览器使用GPU渲染该元素，修正亚像素计算偏差：

  .product {
    border: 5px solid black;
    transform: translateZ(0);
  }
  

• 裁剪溢出内容：给.product设置overflow: hidden，把边缘的白线裁切掉：

  .product {
    border: 5px solid black;
    overflow: hidden;
  }
  

• 调整按钮样式：给按钮添加与容器边框同色的边框，覆盖空白区域：

  .add-to-cart {
    border: 1px solid black;
  }
  

• 改用偶数像素边框：如果设计需求允许，直接使用偶数像素的边框（比如4px、6px），从根源规避这个渲染问题。

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