如何修复IE11中的列表卡？图像较大（css网格）Crhome，Safari可以正常工作

Question

.section-wrap-container1 {
  max-width: 1400px;
  margin: 0 auto;
}

.category__01 {
  display: block;
  border: 0;
  width: 100%;
  height: auto;
  align-item: center;
}

.cards1 {
  display: grid;
  margin: auto 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  /* see notes below */
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 1rem;
  -ms-grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  /* see notes below */
  -ms-grid-auto-rows: minmax(200px, auto);
  -ms-grid-gap: 1rem;
}

.card {
  /*height: 200px;*/
  /*background: red;*/
  border: 2px solid #b2b6ba;
  border-radius: 4px;
  padding: .5rem;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* -webkit-box-orient: vertical; */
  /* -webkit-box-direction: normal; */
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  color: #5d5e5e;
  &:hover {
    transition: all 0.2s ease-out;
    -webkit-box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    -ms-box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    border: 1px solid #cccccc;
    background-color: white;
  }
}


/* li item */

.thumbnail {
  margin: 14px;
}

.thumbnail img {
  width: 100%;
  height: auto;
  align-item: center;
  margin: 0px;
}

.category_01>.box-img {
  margin: 0;
}

.card-content {
  font-size: 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  color: #282d32;
}

.p-add {
  width: 100%;
  padding: 10px;
  margin: 0 auto;
  font-size: 1.1em;
  text-align: center;
  text-decoration: none;
  background-color: #ffae42;
  //border: 0.1em solid #b2b6ba;
}

//.p-add:hover {color:grey;}
.page-header {
  color: #E58A05;
  text-transform: uppercase;
  text-align: left;
  margin-top: 40px;
}

.link-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  //background-color:#DFE3E8;
  margin-top: 10px;
}

.brk-btn {
  position: relative;
  background: #4c4c4c;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 0.1em solid orange;
  border-radius: 5px;
  padding: 0.6em 0.9em;
  font-size: 65%;
  cursor: pointer;
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

<section class="section-wrap-container1">
  <div class="cards1">
    <article class="card">
      <picture class="thumbnail">
        <div class="category__01">
          <a href="https://jarukindustries.co.uk/collections/aerosols">
            <img class="box-img" src="https://cdn.shopify.com/s/files/1/2346/2303/files/Aerosols_for_Homepage.jpg?22675" alt="Aerosols collection jar uk industries">
          </a>
        </div>
      </picture>
      <div class="link-content">
        <a href="https://jarukindustries.co.uk/collections/aerosols" class="p-add"><button class="brk-btn">Aerosols</button></a>
      </div>
    </article>
    <article class="card">
      <picture class="thumbnail">
        <div class="category__01">
          <a href="https://jarukindustries.co.uk/collections/chemicals-sprays">
            <img class="box-img" src="https://cdn.shopify.com/s/files/1/2346/2303/files/chemicals_2_Collection_Homepage.jpg?22663" alt="Chemicals collection jar uk industries">
          </a>
        </div>
      </picture>
      <div class="link-content">
        <a href="https://jarukindustries.co.uk/collections/chemicals-sprays" class="p-add"><button class="brk-btn">Chemicals</button></a>
      </div>
    </article>
  </div>
</section>

我将此代码添加到网站首页。 这是一张卡片列表，我使用了CSS网格。在Chrome，Safari，Android和Ios手机上均可正常运行。在IE11上，它一个又一个地显示非常大的图像。我将图像附加在chrome（很好）和IE11上。是的，有人知道如何解决问题。非常感谢

Chrome，Safari上的图像：https://cdn.shopify.com/s/files/1/2346/2303/files/Screenshot_2019-08-23_at_12.18.05.png?23462

Chrome，Safari上的图像：https://cdn.shopify.com/s/files/1/2346/2303/files/IMG_2971_1.jpg?23461

Answer 1

由于grid-template-columns repeat属性不支持IE浏览器，因此我尝试使用以下CSS样式将其删除：

<style>
    .section-wrap-container1 {
        max-width: 1400px;
        margin: 0 auto;
    }
    .cards1 {
        overflow: auto;
        display: block;
    }

        .cards1 > .card {
            margin: 20px;
            width: 15%;
            float: left;
            color: #fff;
            text-align: center;
        }
    .card {
        /*height: 200px;*/
        /*background: red;*/
        border: 2px solid #b2b6ba;
        border-radius: 4px;
        padding: .5rem;
        -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
        -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        /* -webkit-box-orient: vertical; */
        /* -webkit-box-direction: normal; */
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative;
        color: #5d5e5e;
        min-height:200px;
        min-width:180px;
        /*&:hover

    {
        transition: all 0.2s ease-out;
        -webkit-box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
        -ms-box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
        box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
        top: -4px;
        border: 1px solid #cccccc;
        background-color: white;
    }*/
    }

    .category__01 {
        display: block;
        border: 0;
        width: 100%;
        height: auto;
        align-item: center;
    }

    /* li item */

    .thumbnail {
        margin: 14px;
        height:16vw;
        max-height:200px;
        min-height:150px;

    }

        .thumbnail img {
            width: 100%;
            align-item: center;
            margin: 0px;
        }

    .category_01 > .box-img {
        margin: 0;
    }

    .card-content {
        font-size: 1rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        color: #282d32;
    }

    .p-add {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
        font-size: 1.1em;
        text-align: center;
        text-decoration: none;
        background-color: #ffae42;
        /*//border: 0.1em solid #b2b6ba;*/
    }

    /*//.p-add:hover {
        color: grey;
    }*/

    .page-header {
        color: #E58A05;
        text-transform: uppercase;
        text-align: left;
        margin-top: 40px;
    }

    .link-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        /*//background-color:#DFE3E8;*/
        margin-right: 20px;
        margin-top:10px;
    }

    .brk-btn {
        position: relative;
        background: #4c4c4c;
        color: white;
        text-transform: uppercase;
        text-decoration: none;
        border: 0.1em solid orange;
        border-radius: 5px;
        padding: 0.6em 0.9em;
        font-size: 65%;
        cursor: pointer;
        font-family: sans-serif;
        /* 1 */
        line-height: 1.15;
        /* 1 */
        margin: 0;
        /* 2 */
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS */
        .link-content {
            margin-bottom: 50px;
        }
    }
</style>

结果如下：

更多详细信息，请检查this sample。