css - 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。