背景渐变基线网格无法像素完美对齐的问题排查与解决方案咨询

一开始我以为是行高的问题（:root里设置的行高逻辑符合4px基础网格的倍数要求），但排查后发现不是这个原因。

我遇到的核心问题是：

• 从示例中移除<img>标签，或者给图片设置一个能被4px整除的高度时，基线网格能做到像素级完美对齐；
• 但如果不给图片显式设置高度，背景渐变就会出现半像素偏移，导致网格错位。
  看起来这是一个内容高度引发的问题。

测试操作说明 #

可以通过以下方式更清晰地观察问题：

• 切换图片的显示/隐藏状态：有图片时网格会偏移半像素，建议在桌面端查看效果；
• 调整.gl-baseline-grid::after的top属性值，分别对比有图片和无图片时的网格对齐情况；
• 用触控板放大页面（ pinch and zoom ），近距离观察网格的偏移细节，这样更容易看清问题。

完整的背景渐变与基线网格代码 #

先设置基础字号为1rem，行高为1.5，相关CSS变量和类代码如下：

:root {
  --spacing: calc((24 / 16) * 1rem);
  --spacing-quarter: calc((4 / 16) * 1rem);
  --spacing-px: calc((1 / 16) * 1rem);
}

.gl-baseline-grid {
  --baseline-grid-align-top: 0; // (2)
  --baseline-grid-depth: -1; // (3)
  --baseline-grid-background: lightyellow;
  --baseline-grid-color-line-one: #000; // rgb(0, 139, 137)
  --baseline-grid-color-line-two: #666; // rgb(133, 231, 231)
  --baseline-grid-color-square: #FFD932;
  --baseline-grid-size: var(--spacing); // --spacing
  --baseline-grid-line-one: var(--baseline-grid-size);
  --baseline-grid-line-two: var(--spacing-quarter);
  --baseline-grid-opacity: 0.5;
  --baseline-grid-square-size: var(--baseline-grid-size);
  position: relative;
  background: var(--baseline-grid-background); // (4)

  &::before {
    background: repeating-conic-gradient(
      var(--baseline-grid-color-square) 0 25%, transparent 0 50%
    ) 0 / var(--baseline-grid-square-size) var(--baseline-grid-square-size);
    content: '';
    display: block;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute; // (5)
    top: var(--baseline-grid-align-top); // (5)
    width: 100%;
    z-index: calc(var(--baseline-grid-depth) + 1);
  } // (4)

  &::after {
    background: linear-gradient(
        0deg,
        var(--baseline-grid-color-line-one) var(--spacing-px),
        transparent var(--spacing-px),
        transparent
      ),
      linear-gradient(0deg, var(--baseline-grid-color-line-two) var(--spacing-px), transparent var(--spacing-px), transparent);
    background-size: auto var(--baseline-grid-line-one), auto var(--baseline-grid-line-two);
    content: '';
    display: block;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    top: var(--baseline-grid-align-top);
    width: 100%;
    z-index: calc(var(--baseline-grid-depth) + 1);
  }
}

核心疑问 #

我现在有几个核心问题想请教大家：

• 到底是什么原因导致了这个问题？为什么图片的高度会影响到背景渐变的对齐？
• 如果确实是图片高度的问题，有没有办法隔离背景渐变，让它不受这类垂直高度间距问题的影响？比如即使页面中有元素打破了4px网格规则，背景渐变的基线也不会出现偏移？
• 针对这类基线网格对齐的问题，有没有实用的解决建议或最佳实践？

折腾了好久才定位到是图片的问题，这个半像素偏移真的快把我搞疯了，希望能得到大家的帮助！

内容来源于stack exchange