CSS 网格布局 IE11 不考虑大小

Question

我在 IE11 上用谷歌搜索了 display:grid 和 grid-template-columns 的等价物，但我无法让它像 chrome 那样工作，我做错了什么？我也将我的代码粘贴到代码片段上，但黄色条没有显示在这里

.ctn_mapa_hoteles {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 300px 790px auto;
  -ms-grid-columns: 300px 790px auto;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">
  </div>
  <div class="col_ctn_hoteles">
  </div>
  <div class="col_ctn_mapa">
  </div>
</div>

Answer 1

我遇到了同样的问题。 IE 对开发人员不友好。 Grids 和 Flexbox 都有优点，我也很喜欢用 Grids。据我所知，IE 不支持网格。因此，需要添加一个 Flexbox fallback。你通过媒体做到这一点。

 // for IE 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

// flexbox code will go here

.yourdivclassname {
  display: inline-flex;

}

}

对于支持网格的所有其他浏览器（Firefox、Chrome、Edge 等）

@supports (display: grid) {

.yourdivclassname {
   display: grid;

}
}

这就是我能够在不同浏览器中保持网页设计一致的方法。我从网格设计开始。按照我想要的方式获得它后，我将其复制到 Flexbox 设计中，并将对 Grids 的引用替换为 Flexbox 引用。

很好的 Flexbox 教程 Flexbox Tutorial

很棒的网格教程 Grids Tutorial

Answer 2

IE 11 还要求告诉每个 children 在网格内的位置：

.ctn_mapa_hoteles {
  grid-template-columns: 300px 790px auto;
  display: grid;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}
/* IE11 fix grid layout */
.ctn_mapa_hoteles {
  display: -ms-grid;
  -ms-grid-columns: 300px 790px 1fr;/* note 1fr instead auto */
}

.col_ctn_filtros {
  -ms-grid-column:1;
}

.col_ctn_hoteles {
  -ms-grid-column:2;
}

.col_ctn_mapa {
  -ms-grid-column:3;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">12
  </div>
  <div class="col_ctn_hoteles">45
  </div>
  <div class="col_ctn_mapa">78
  </div>
</div>

在 IE11 中可以运行的 jsbin : https://jsbin.com/qiwehinuwi/1/edit?html,css,output

auto-flow 规格不可用，对于使用 auto-flow 填充网格的其他类型的布局，您需要为 IE 设置替代布局，这是 IE11 的另一个问题示例：Responsive Layout when using grid

CSS 网格布局 IE11 不考虑大小

CSS Grid layout IE11 doesn't respect sizes

html

css

internet-explorer