IE11 的 CSS 網格布局支持

Question

我們正在嘗試使用 IE-11 的 css 網格開發 UI 布局，這里的問題是我們已經為所有瀏覽器開發了布局，但尚未在 IE11 上進行測試，現在我們處於應用程序的最后階段並試圖使其工作對於 IE11，但看起來當前的 css 不適用於 IE11，因此決定通過瀏覽器檢測為 IE11 編寫單獨的 css。 這是我的模型 （嘗試在不更改 HTML 的情況下進行開發 -> 如果我們更改 HTML，它將影響其他瀏覽器）

我的問題是，如果您看到代碼，我無法在不更改 html 結構的情況下生成模型中所示的所需布局。

 body { margin: 100px; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; margin: 10px; } .ie-content { display: -ms-grid; display: grid; grid-gap: 10px; -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; background-color: blueviolet; color: #444; } .ie-viewer { -ms-grid-column: 1; grid-column: 1; background: yellowgreen; -ms-grid-column-span: 3; grid-column: 1 / span 3; } .ie-viewerControls { -ms-grid-column: 1; grid-column: 1; } .ie-configure { -ms-grid-column: 4; grid-column: 4; background: red; height:100px; }

 <div class="ie-content"> <div class="box ie-viewer">viewer</div> <div class="box ie-viewerControls">viewerControls</div> <div> <div class="box ie-configure">configure </div> </div> </div> </div>

Answer 1

IE 11 沒有對應的grid-column-gap和grid-row-gap 。 如果需要，則必須添加假列/間隙，例如

-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;

最重要的是，IE 11 網格中的每個元素都必須按列/行定位，否則它們最終會在第 1 列/第 1 行中彼此堆疊。

話雖如此，當然您需要在定位/跨越元素時考慮虛假的“間隙”列/行。