CSS - 为chrome和ie10创建兼容的div网格

Question

我有一个jquery / css问题，我有一个网格，我在我的网站上覆盖，试图制作一个ARG codebreaker网页浏览器游戏，但我有与CSS没有＆＃的事实的兼容性问题39;不承认

<div id ="grid" class="grid-container" style="pointer-events:none; touch-action: none;">
  <div id ="symbol1" class="null"></div>
  <div id ="symbol2" class="null"></div>
  <div id ="symbol3" class="null"></div>
  <div id ="symbol4" class="null"></div>
  <div id ="symbol5" class="null"></div>
  <div id ="symbol6" class="null"></div>
  <div id ="symbol7" class="null"></div>
  <div id ="symbol8" class="null"></div>
  <div id ="symbol9" class="null"></div>
  <div id ="symbol10" class="null"></div>
</div>

这个想法是在游戏画面上叠加由jquery改变的微弱符号，你可以点击它下面的项目。这适用于所有浏览器，除了我希望支持的Iexplore 10-11。

此div网格在css中声明为

 .grid-container {
 position: absolute;
 left: -20px;
 width: 100%;
 height: 80%;
 display: inline-grid;
 grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  padding: 10px;
  z-index: 2;
  pointer-events:none;
  touch-action: none;
  width:100%;
  height:100%;  
}

.grid-item {
  padding: 10px;
  height: 60px;
  width: 60px;
  font-size: 15px;
  text-align: center;
  z-index: 2;
  position: absolute;
  touch-action: none;
  pointer-events: none;
}

每个符号都是网格项的子类，div被随机改为div项的右子类，但具有秘密序列。

显然IE10-11不支持网格模板列：所以如何更改网格仍然以这种方式工作并且与IExplore兼容？

示例这就是我想要网站的样子。 但它不是12个网格空间，而是10个深度的20x10网格20。

我想补充的一点是，我必须拥有它，以便它可以根据页面加载，随机符号进行更改，但序列从另一个位置导入javascript变量，这是我认为这种方法的最佳方法。我不能只通过覆盖图像来做。我必须在页面加载时编辑div作为我想要的符号。

最好的方法是什么？

Answer 1

我在这里找到了关于flex-box的答案：（css grid of squares with flexbox）

您可能最好将其重新设计为此方法，而不是将来使用CSS auto。

它还有一个JS小提琴例子：USER：@ G-Cyr

   .grid-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    justify-content: space-around;

    line-height:30px;
}
.grid-item {
    background: tomato; <* replace with your default symbol image url here*>
   <* assuming your jquery is changing them at runtime should work*>
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 auto;
    height:auto;
}
.grid-item:before {
    content:'';
    float:left;
    padding-top:100%;
}

您还必须为每一行创建一个容器