internet-explorer-11 - 适合对象：封面和 IE11

Question

我正在使用 object-fit: cover; 在我的 CSS 中排列页面上的图像，因为它们需要具有相同的高度。它在大多数浏览器中都能完美运行，但 IE11 会扭曲图像。

我读到我可能可以使用@support 来解决这个问题，但我不明白该怎么做？或者还有其他我可以使用的选项吗？

我使用的代码如下 - 非常感谢任何帮助。

.brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
}

.brands__item img {
  display: block;
  /* Make sure max-width is added */
  max-width: 100%;
  height: 70px;
}
    
.brands__item img {
  width: 130px;
  height: 75px;
  object-fit: contain;
}   
    
.brands__item a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
    


<div class="row" style="padding: 10px 30px 40px;">
    <hr style="border-color: #000000; border-width: 2px; width: 90px; margin-bottom: 10px;" />
<h5 style="text-align: center;font-size: 2.4rem;margin-bottom:30px;">Trending now</h5>
<ul class="brands">
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/steel-blue-logo-148x75.png" alt="Steel Blue logo" />
    </a>
  </li>
    <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/dewalt-logo-103x45.png" alt="Dewalt logo" />
    </a>
  </li>
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/3m-logo-105x55.png" alt="3M logo" />
    </a>
  </li>
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/bahco-logo-125x75.png" alt="Bahco logo" />
    </a>
  </li>
    <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/honeywell-logo-211x40.png" alt="Honeywell logo" />
    </a>
  </li>
  <li class="brands__item">
    <a href="#">
      <img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/metabo-logo-166x65.png" alt="Metabo logo" />
    </a>
  </li>
</ul>
</div>
<!-- end -->

score 0 · Accepted Answer

我在 IE 11 中测试了您的代码，问题似乎不仅仅在于object-fit.

您的代码的 CSS Grid 部分在 IE 11 中不起作用。
- 您需要对,和-ms-等元素使用前缀。display: gridgrid-columngrid-row
- grid-template-areas不支持，您可以将其转换为使用grid lines.
- 该repeat()符号在 IE 11 中不起作用。您需要写入所有行和列长度。
object-fitIE 11不支持。您可以参考此线程进行修复。

我使用@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}CSS 中的 IE 11 来为 IE 11 添加一些代码来解决问题。添加的代码如下：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .brands__item img {
        width: 130px;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .brands {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    li:nth-of-type(1) {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    li:nth-of-type(2) {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }

    li:nth-of-type(3) {
        -ms-grid-column: 3;
        -ms-grid-row: 1;
    }

    li:nth-of-type(4) {
        -ms-grid-column: 4;
        -ms-grid-row: 1;
    }

    li:nth-of-type(5) {
        -ms-grid-column: 5;
        -ms-grid-row: 1;
    }

    li:nth-of-type(6) {
        -ms-grid-column: 6;
        -ms-grid-row: 1;
    }
}

internet-explorer-11 - 适合对象：封面和 IE11

1 回答 1

Related

Reference