HTML中的跨浏览器网格系统

Question

我想将网格系统应用到我的项目中，但是我获得的资源只适用于IE8-10，其他浏览器上的网格不能正常工作。

我希望网格能够高效地显示在Chrome，Opera和火狐(交叉浏览器)上。

这是css代码：

body{
-ms-grid-columns: ;
-ms-grid-rows: ;
}
body{
  display: -ms-grid;
}

我该怎么做？

Answer 1

论堆叠溢流已经回答了这个问题。

正确的答案是由三十点在那里。为了使这一答案与你的具体问题更切合实际和更切合实际，请翻译成这样：

网格布局的支持很差--您使用的启动-ms声明是特定于微软厂商的，其他浏览器不支持。

Webkit ( Chrome和Safari背后的引擎)一直致力于在这里看到的的实现，但它仍然不完整，使用的语法略有不同：

.gridWithFixed {
    display: -webkit-grid;
    -webkit-grid-columns: 7px 11px;
    -webkit-grid-rows: 17px 2px;
}

因此，目前还没有一种实现CSS的方法可以在夜间浏览器构建和IE10之外工作。

作为另一种选择，Flexbox得到了不错的支持(包括IE10)。所以，您能做的最好是使用Flexbox代替。

Answer 2

目前，css3支持跨浏览器/跨平台是相当可悲的。

flexbox是一种选择，尽管它的支持有限，@至少在传统浏览器中是如此，但它并不是一种淘汰。这取决于您所支持的内容:有多少浏览器、浏览器版本、用户代理等等？这个列表中有很多遗留的或“非现代”的浏览器吗？那我就避免挠曲箱了。

我会使用九百六十或非语义，跨浏览器的网格布局库。非语义是后继者，但它们都是多才多艺的，而且重量很轻。