网格模板列不适用于 ie11？

Question

我正在使用 tailwind css 并且 grid-template-columns 在 IE11 中不工作。

如何分离才能在 IE11 上运行？

grid-template-columns: repeat(2, minmax(0, 1fr))

  <div
    class="mx-15 tb:grid tb:grid-cols-2 tb:gap-x-40 tb:mt-20 tb:mx-40 pc:w-1280 pc:mx-auto pc:mt-0 grid-column"
  >
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
    <article class="mb-100">
      <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
        2020.10.26
      </p>
      <div
        class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
      >
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaaa</span>
        <span class="mr-5">#aaa</span>
      </div>
    </article>
  </div>

现在，问题是此代码在 Chrome、Firefox 和 Opera 中运行良好，但当我在 Microsoft Edge 或 IE 11 中打开此页面时，所有网格项目在第一个单元格中相互重叠。

Answer 1

Internet Explorer grid-template-columns 可以兼容层级关系-ms-grid。然后，你可以在sub-style中设置行列的比例。例子如下：

.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 300px 300px 300px;
  grid-template-columns: 300px 300px 300px;
}

.box1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.box2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.box3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

<div class="wrapper">
  <article class="box1">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
  <article class="box2">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
  <article class="box3">
    <p class="mb-10 font-light text-left font-en text-12 text-gray-85">
      2020.10.26
    </p>
    <div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaaa</span>
      <span class="mr-5">#aaa</span>
    </div>
  </article>
</div>

IE 中的结果：

网格模板列不适用于 ie11？

grid-template-columns is not working to ie11?

html

css

grid

internet-explorer

tailwind-css