对象适配:盖子和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 -->

Answer 1

我在IE11中测试了您的代码，问题不仅出现在object-fit上。

1. CSS部分代码在IE11中不工作。

- You need to use `-ms-` prefix to elements such as `display: grid`, `grid-column` and `grid-row`.
- `grid-template-areas` isn't supported, you can convert it to work with `grid lines`.
- The `repeat()` notation doesn't work in IE 11. You need to write in all row and column lengths.

1. object-fit是未得到IE 11的支持。您可以参考这条线进行修复。
2. 我使用@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}来针对IE11在CSS中添加一些代码来解决这个问题。添加的代码如下所示： @媒体all和(-ms-高对比度:无)，(-ms-高对比度:活动){ .brands__item img {宽度:130 max；高度: auto；最大宽度: 100%；最大高度: 100%；} .brands {显示：-ms-网格；-ms-网格-列:1 1fr 1fr 1fr 1fr；}李:nth-of-type(1){-ms-网格-列: 1；-ms-网格-行: 1；} li:nth-of-type(2) {-ms-网格-列: 2；-ms-网格-行: 1；} li:nth-of-type(3) {-ms-网格-列: 3；-ms-网格-行: 1；}li:n-of-type(4){-ms-网格-列: 4；-ms-网格-行: 1；} li:nth-of-type(5) {-ms-网格-列: 5；-ms-网格-行: 1；}li:nth-of type(6){-ms-网格-列: 6；-ms-网格-行: 1；}