IE11中的CSS等宽和高度网格框

Question

我试图将这些盒子放在一个网格中，让它响应，保持相同的高度并与最大的盒子。

它在 chrome 中按我想要的方式工作，但当然 IE 给我带来了问题。

在 Chrome 中查看它以了解我希望它如何运行（注意每行中的框如何调整到最高框的大小）

然后在 IE 中查看。我使用的是 IE11。

我确定需要一些 -ms- 标签，我已经尝试过，但可以在 IE 中正常工作。

非常感谢任何帮助。

click here

<div class="aaChartWrap">
  <div class="docWrap">

    <a class="docItem" href="#" target="_blank">
      <p>Title </p>
      <div>View</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title </p>
      <div>View</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title Title Title Title Title </p>
      <div>View</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title </p>
      <div>View</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title Title </p>
      <div>View</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title Title Title Title </p>
      <div>Download</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title </p>
      <div>View</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title Title Title</p>
      <div>Download</div>
    </a>

    <a class="docItem" href="#" target="_blank">
      <p>Title Title Title Title Title Title Title Title Title Title Title Title</p>
      <div>Download</div>
    </a>

  </div>
</div>



.docWrap {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 10px;
}
.docItem {
  background: #000;
  color: #fff;
  border: 1px solid;
  padding: 7px 10px;
  position: relative;
  display: table;
  width: 92%;
  height: 100%;
  padding-bottom: 34px;
  line-height: 16px;
}

.docItem .docDrop {
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
}

.docItem:hover, .docItem:focus {
  color: #fff;
}

.docItem p {
  font-size: 14px;
  vertical-align: middle;
  margin: 0;
  display: table-cell;
}

.docItem div {
  position: absolute;
  bottom: 5px;
  left: 10px;
  font-size: 12px;
  color: #0098c3;
  font-family: Open Sans;
  font-weight: 400;
}

@media (max-width: 1199px) {
  .docItem {
    padding-bottom: 24px;
  }
}

@media (max-width: 991px) {
  .docItem {
    padding-bottom: 34px;
  }
}

Answer 1

编辑

当我最初写答案并粘贴不符合 IE11 的 CSS 时，我想我是自动添加前缀的。以下是我在实际 IE11 环境中验证的更新样式。

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3]
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.grid > div {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.b {
  -ms-grid-column: 2;
  grid-column: 2;
}

.c {
  -ms-grid-column: 3;
  grid-column: 3;
}

.d {
  -ms-grid-row: 2;
  grid-row: 2;
}

.e {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
}

.f {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 2;
  grid-row: 2;
}

---

在 IE11 中，我将盒子放到我想要的位置，我必须使用 grid-column 和 grid-row 明确地放置它们。由于1 是这些属性的默认值，我让该值隐式发生。此外，不需要供应商前缀。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;  
  background-color: #fff;
  color: #444;
}

.grid > div {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;  
}

.b {
  grid-column: 2;
}

.c {
  grid-column: 3;
}

.d {
  grid-row: 2;
}

.e {
  grid-column: 2;
  grid-row: 2;
}

.f {
  grid-column: 3;
  grid-row: 2;
}

<div class="grid">
  <div class="a">content</div>
  <div class="b">content goes here content goes here content goes here content goes here content goes here content goes here </div>
  <div class="c"></div>
  <div class="d">content</div>
  <div class="e"></div>
  <div class="f">content goes here content goes here content goes here content goes here content goes here </div>
</div>