网格模板列不适用于 ie11？

Posted 2023-03-07

【中文标题】网格模板列不适用于 ie11？

【英文标题】：grid-template-columns is not working to ie11?

【发布时间】：2021-02-06 07:22:40

【问题描述】：

我正在使用 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。

Tailwind 已经提供了自动前缀，但它不会工作

嗨@MaeTeffany，这个问题怎么样？我下面的回答对解决这个问题有帮助吗？如果是这样，您可以参考this，它可以帮助其他社区成员将来解决类似的问题。感谢您的理解。

嗨@YuZhou 是的。谢谢你

【参考方案1】：

Internet Explorer 的grid-template-columns 可以兼容层级关系-ms-grid。然后，您可以设置子样式中的行列比例。示例如下：

.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 中的结果：