Question

我正在尝试使用@support使用新的 CSS网格布局设置定义列表的样式以绕过旧版浏览器。 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 Grid Layout规范的过时版本。

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

有关网格边缘支持的更多信息，包括哪些有效，哪些无效，以及实施状态，请参阅此页：

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

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

1 个答案: