HTML中的跨浏览器网格系统

Question

我想在我的项目中应用网格系统，但我获得的资源仅适用于 IE8-10 ，网格无法正常工作在其他浏览器上。

我希望网格能够在 Chrome，Opera和Firefox （跨浏览器）上高效显示。

这是css代码：

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

我该怎么做？

Answer 1

已经回答on Stack Overflow here。

正确的答案是thirtydot。用来解释这个答案是最新的，与你的具体问题更相关：

---

Grid Layout支持非常差 - 您使用的启动-ms的声明是Microsoft特定于供应商的，而其他浏览器则不支持。

Webkit（Chrome和Safari背后的引擎）一直致力于seen here的实现，但它仍然不完整，使用的语法略有不同：

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

所以，现在没有办法以一种在夜间浏览器构建和IE10之外工作的方式实现CSS。

作为替代方案，Flexbox得到了不错的支持（包括IE10）。因此，您可以做的最好的事情就是使用Flexbox。

Answer 2

css3支持跨浏览器/平台目前非常可怜。
flexbox是一个选项，虽然它有限的支持，至少在旧版浏览器中，它不是淘汰赛。这取决于你支持的内容：有多少浏览器，浏览器版本，用户代理等？有很多遗产或非现代的＆＃34;该列表中的浏览器？然后我会避免flexbox。

我会使用960gs或unsemantic跨浏览器网格布局库。 unsemantic是接班人，但它们既多才多艺又轻巧。