跨浏览器的行高渲染不同

Question

我正在创建一个网格布局，如下所示：

每行包含 3 个项目和这些项目之后（以及下一行之前）的分隔线。

代码如下：

HTML：

<div class="container">
  <div class="item">ab</div> <!-- item -->
  <div class="item">cdef</div> <!-- item -->
  <div class="item">ghi</div> <!-- item -->
  <div class="line"></div> <!-- divider line -->
  
  <div class="item">jkl</div>
  <div class="item">mno</div>
  <div class="item">pq</div>
  <div class="line"></div>
  
  <div class="item">rs</div>
  <div class="item">tuvw</div>
  <div class="item">xyz</div>
  <div class="line"></div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr min-content;
}

.line {
  grid-column: 1/4;
  height: 1px;
  width: 100%;
  background: blue;
}

问题是分隔线的高度有一个奇怪的行为。以下屏幕截图来自不同的浏览器（Chrome 和 Firefox）。每次，其中一条线都被渲染得更高：

使用 Chrome 工具检查 DOM，高度始终显示为 1px（用 CSS 编写）。因此，这似乎是一个渲染问题。

我想这个问题可以用这个小提琴重现：https://jsfiddle.net/o96avqe8/

更新： 这个问题与网格无关。它甚至出现在以下最小示例中：

HTML：

<div class="line"></div>
<div class="line"></div>
<div class="line"></div>

CSS：

.line {
  width: 100%;
  height: 1px;
  background: blue;
  margin-bottom: 20px;
}

Answer 1

我无法重现您描述的问题。

使用您的代码，布局在 Firefox 和 Chrome 上呈现相同。

但这里有一个想法可能会解决您看到的问题：尝试不同的方法来生成线条。

• 从 HTML 中删除这些行（为了更清晰的标记，它们不应该在那里）
• 在容器上设置背景颜色
• 使用grid-row-gap 属性生成线条

.container {
  display: grid;
  grid-template-columns: 1fr 1fr min-content;
  grid-row-gap: 1px;
  background-color: blue;
  border-bottom: 1px solid blue;
}

.item {
  background-color: white;
}

<div class="container">
  <div class="item">ab</div>
  <div class="item">cdef</div>
  <div class="item">ghi</div>
  <div class="item">jkl</div>
  <div class="item">mno</div>
  <div class="item">pq</div>
  <div class="item">rs</div>
  <div class="item">tuvw</div>
  <div class="item">xyz</div>
</div>