CSS网格布局 - 内容崩于微软边缘

Question

我试图风格新CSS网格布局使用@support定义列表来解决旧的浏览器。 Autoprefixer将其更改为旧版本边缘。

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>

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

全部<dt> s应该与最大的min-content具有相同的宽度。

有没有办法来推动内容到正确的行不知道的<dl>儿童的最终量？

Answer 1

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

Edge正在实现当前规范。

有关电网支持EDGE的更多信息，包括什么可行，什么不可行，和执行状况，看到这个页面：

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