css 背景图像重复使用 python http.server 和 chrome 不能很好地播放

Question

背景

在过去的几周里，我一直在尝试使用基线网格。而且我无法弄清楚为什么内容会随着页面向下移动而偏离网格。

这似乎是 Chrome 错误或 python http.server 问题。 （或两者的结合。）

这是在 3 个不同浏览器中呈现的相同内容。从左到右：

1. 火狐 76.0.1
2. Chrome Canary 85.0.4170.0
3. Chrome 83.0.4103.97（隐身，所以没有扩展做意外的事情）

我认为这与绘制基线的方式有关，因此我尝试了 3 种不同的网格绘制方式：重复图像和 2 种渐变基础方式。事实证明，它们都以几乎完全相同的方式工作。漂移是由当前生产的 Chrome 重复背景的方式引起的。

它在金丝雀中正常工作，所以祈祷吧，如果我等待，问题就会消失。

真正令人困惑的是，它根据服务器和浏览器的不同显示不同。

图 1 显示了从我的文件系统提供的 html 文件，第二个显示它通过 python -m http.server 提供服务。图 1 完全符合预期，但图 2 显示了漂移误差。这意味着它在 Canary、Firefox、Chrome 中从文件系统和 Chrome from GitHub pages 中按预期呈现，但在由 python 的服务器提供服务时呈现错误。

问题

1. 是什么原因造成的？
2. 是否已记录在案？我还有其他需要担心的事情吗？
3. 可以用标志或类似的东西来修复它吗？

---

以下是实时版本，如果您的系统存在问题，您应该会看到文本在第二或第三段开始偏离基线。

      :root {
        --line-height: 1.4rem;
        --baseline-color: hsla(194, 100%, 50%, 0.7);
        --color-paper: hsla(0, 0%, 100%, 0);
      }
      * {
        margin: 0;
        padding: 0;
      }
      div {
        display: inline-block;
        width: 24%;
        outline: 1px solid;
      }
      h1 {
        line-height: calc(var(--line-height) * 2);
        margin-bottom: calc(var(--line-height) * 1);
        transform: translateY(calc(var(--line-height) * 0.5));
        text-transform: capitalize;
      }
      p {
        line-height: calc(var(--line-height) * 1);
        margin-bottom: calc(var(--line-height) * 1);
        transform: translateY(calc(var(--line-height) * 0.3));
      }
      .one {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAYAAAC/zKGXAAAACXBIWXMAAAsSAAALEgHS3X78AAAAOklEQVRYhe3XsREAIAwDsYRj/1VYjQ3CCi4o5Vrn/ntmKtmKFAiCIAiCIAiCIAiCX+Duc6Nkzx6r6gH6HwZmQ2wUyAAAAABJRU5ErkJggg==");
        /* background-image: url(../line_marker.png); */
        background-size: 100% var(--line-height);
        background-repeat: repeat-y;
      }
      .two {
        background-image: linear-gradient(
          var(--baseline-color) 1px,
          transparent 1px
        );
        background-repeat: repeat-y;
        background-size: 100% var(--line-height);
      }
      .three {
        background: linear-gradient(
            var(--color-paper) 0%,
            var(--color-paper) calc(var(--line-height) - 1px),
            var(--baseline-color) calc(var(--line-height) - 1px),
            var(--baseline-color) var(--line-height)
          ),
          transparent;
        background-repeat: repeat-y;
        background-size: 100% var(--line-height);
      }
      .four {
        background: repeating-linear-gradient(
          white 0,
          white calc(var(--line-height) - 1px),
          var(--baseline-color) calc(var(--line-height))
        );
        background-size: cover;
        background-repeat: repeat-y;
        background-position-y: 1px;
      }

<div class="one">
      <h1>one</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="two">
      <h1>two</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="three">
      <h1>three</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="four">
      <h1>four</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>

Answer 1

起初很难确定图像的问题，但从第一张图像看，似乎有不同的字体正在呈现。我建议添加一个font-family，这与Times 一样常见，然后再次尝试针对浏览器进行测试。看看他们是否至少呈现相同甚至相同的问题。您显示的图像似乎根据浏览器选择的偏好而不是您希望首先选择的内容来识别不同的字体系列。