支持IE11的CSS网格布局 [英] CSS grid layout support for IE11

问题描述

我们正在尝试为IE-11开发使用CSS网格的UI布局，这里的问题是我们已经为所有浏览器开发了布局，但还没有在IE11上进行测试，现在我们处于应用程序的最后阶段，并试图使其适用于IE11，但它看起来当前的CSS不适用于IE11，所以决定通过浏览器检测为IE11编写单独的CSS。 这是我的样机(尝试在不更改HTML的情况下进行开发->如果我们更改了HTML，会影响其他浏览器)

我的问题是，如果您看到代码，如果不更改html结构，我将无法生成样机中所示的所需布局。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

推荐答案

IE 11没有对应的grid-column-gap和grid-row-gap。如果需要，您必须添加伪列/间隙，如

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

最重要的是，IE 11网格中的每个元素都必须按列/行放置，否则它们最终会在第1列/第1行堆叠在一起。

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

这篇关于支持IE11的CSS网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！