IE11 的 CSS 网格布局支持答案

【问题标题】：CSS grid layout support for IE11IE11 的 CSS 网格布局支持
【发布时间】：2019-04-12 05:55:45
【问题描述】：

我们正在尝试使用 css grid 为 IE-11 开发 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>

【问题讨论】：

codepen的链接必须附上问题本身的代码——请不要忽视SO的规则
那么..你的问题是什么？
如果您可以看到 codepen 示例无法生成所需的布局
请不要让读者点击链接查看代码，也不要通过将任意文本伪装成代码来规避规则。这不是您的第一个问题，也不是您的第一个包含代码的问题，因此您没有理由不将其包含在问题中。
给所有阅读本文的人的提示...总是为需要支持的最古老的浏览器设计网页布局。

标签： html css css-grid

【解决方案1】：

IE 11 没有 grid-column-gap 和 grid-row-gap 的等价物。如果需要，您将不得不添加假列/间隙，例如

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

最重要的是，IE 11 网格中的每个元素必须按列/行定位，否则它们最终会在列 1/行 1 中相互堆叠。

话虽如此，在定位/跨越元素时，您当然需要考虑假的“间隙”列/行。

【讨论】：