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