为什么 display=grid 在 IE 中不起作用？答案

【问题标题】：Why is display=grid not working in IE?为什么 display=grid 在 IE 中不起作用？
【发布时间】：2017-09-25 05:53:51
【问题描述】：

我在 CSS 中使用display = grid。它适用于 Chrome 和 Firefox，但不适用于 IE。任何 CSS 技巧或任何其他解决方案？

【问题讨论】：

在什么版本的 IE 中？
什么不起作用？
display:grid 仅适用于 IE11
仅在 IE11 和旧版本的规范中。 caniuse.com/#feat=css-grid

标签： css internet-explorer grid css-grid

【解决方案1】：

指定例如：

#grid_container {
    display: -ms-grid
    display: grid
    ...
}
<div id="grid_container">
    ...
</div>

目前，截至 2017 年 11 月 14 日，适用于 Windows 上的 Internet Explorer 和 Edge，以及 Windows 和其他平台上的其他浏览器。

新样式display property将对其他浏览器生效，而原来Grid element加上March 2012 W3 Working Draft中的vendor prefix将被Windows中的Internet Explorer和Edge浏览器使用。

这是最新的： 2017-11-14:
IE 11.726.15063.0 更新 11.0.48
边缘 40.15063.674.0
Windows 1703 内部版本 15063.726。

并在以下位置进行测试：
High Sierra 中的 Chrome、Firefox、Safari 和 Vivaldi；
Android 手机中的 Chrome、Firefox 和 Samsung Cloud（移动浏览器）；和
Windows 10 中的 Chrome、Firefox、Internet Explorer 和 Edge。

我还在使用例如：

-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 1;
grid-column: 2 / 3;
grid-row: 1;

根据先前的研究，即Rachel Andrew

考虑到事情的发展速度，我意识到这有点过时了，但我希望它对某人有所帮助。

【讨论】：

【解决方案2】：

显示：-ms-grid；对于块级网格元素

display: -ms-inline-grid; 用于内联网格元素

来自https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

Grid 布局的基本构建块是 Grid 元素，通过将元素的 display 属性设置为 -ms-grid（对于块级 Grid 元素）或 -ms-inline-grid（对于一个内联级 Grid 元素）。（由于网格布局草案的初步状态，此值和本节中的所有属性必须与 Microsoft 特定的供应商前缀“-ms-”一起使用，才能与 Internet Explorer 10 和使用 JavaScript 的 Windows Store 应用程序一起使用在 Windows 8 中。）

【讨论】：

【解决方案3】：

display: grid 即使在 IE11 中也对我不起作用。我用display: block 替换了它，它适用于所有浏览器。不确定它是否适用于所有场景。我使用 CSS 修复了一些对齐问题。

【讨论】：