html - 如何修复 IE11 中的列表卡？图像很大(css 网格)Chrome，Safari 运行良好

标签 html css internet-explorer 

.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

最佳答案

自 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>

结果是这样的:

enter image description here

更多详情请查看this sample .

关于html - 如何修复 IE11 中的列表卡？图像很大(css 网格)Chrome，Safari 运行良好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57625543/

上一篇：html - 页面选项卡 WordPress 的自定义 CSS

下一篇：javascript - 当 src 为 dataURL 时指定视频的名称

相关文章：

javascript - 注入(inject)的链接样式表优先于 IE7+ 中的现有样式

javascript - 带有 DOM 的 anchor 标记 while 循环事件始终返回表中的最后一行 element.parentNode

html - 将 SVG 放在 html 元素上

css - 我如何在 Nightmare.js 中找到 .click 的选择器？

javascript - 重叠选项卡/下拉 div - 链接不起作用 - CSS 或 JS 问题？

html - TD 中的 100% DIV 高度，带有自定义滚动条

javascript - paroller.js 在第一次加载页面时无法正常工作

javascript - 位置:固定一个元素覆盖其他元素

css - WordPress 自动换行和换行问题

html - header 在 IE 7-8 中乱七八糟

©2024 IT工具网  联系我们