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

Posted 2023-03-06

【中文标题】IE11中的CSS等宽和高度网格框

【英文标题】：CSS equal width and height grid boxes in IE11

【发布时间】：2018-02-23 19:25:53

【问题描述】：

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

它在 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;
  

【问题讨论】：

你解决过这个问题吗？

【参考方案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>

【讨论】：

这不适用于 IE11...

@Leviathan 我更新了我的答案。请看一下（✅已在IE11环境下验证）。