CSS 网格布局 - Microsoft Edge 上的内容折叠

Question

我正在尝试使用新的 CSS 网格布局 设置定义列表的样式，使用 @support 绕过旧浏览器。 Autoprefixer 将其更改为 Edge 的旧版本。

dl {
  display: grid;
  grid-gap: 0.5rem 0.75rem;
  grid-template-columns: min-content 1fr;
  
  display: -ms-grid;
  -ms-grid-gap: 0.5rem 0.75rem;
  -ms-grid-columns: min-content 1fr;
  
}

/* visual styles */
dl {
  font-family: sans-serif;
  padding: 0.75rem;
}

dt {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

dd {
  margin: 0;
}

<dl>
  <dt>Lorem</dt>
  <dd>Ipsum</dd>

  <dt>Lorem</dt>
  <dd>Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</dd>

  <dt>Longer Lorem</dt>
  <dd>Ipsum</dd>
</dl>

查看上面的代码，Edge 折叠了不可读的全部内容。添加 grid-column-start 和 grid-column-end 会将 <dt> 和 <dd> 推入右列。

所有 <dt> 的宽度应与最大的 min-content 的宽度相同。

有没有办法在不知道 <dl> 的最终子级数量的情况下将内容推送到正确的行中？

Answer 1

Microsoft Edge 支持 CSS 网格布局规范的过时版本。

Edge 现在正在实施当前规范。

有关 Edge 对 Grid 的支持的更多信息，包括哪些有效，哪些无效，以及实施状态，请参阅此页面：

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/grid/?q=grid%20update

CSS 网格布局 - Microsoft Edge 上的内容折叠

CSS Grid Layout - content collapsing on Microsoft Edge

css

css-grid

autoprefixer

microsoft-edge