html - 如何修复 IE11 中的列表卡?图像很大(css Grid)Crhome,Safari 运行良好
问题描述
.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>
结果是这样的:
更多详细信息,请查看此示例。
推荐阅读
- javascript - 按地图内数组项内的对象对对象数组进行排序
- c# - Blazor 组件:通知导致线程冲突的集合更改事件
- python - numpy:有效地获取由另一个数组的元素分组的数组元素的统计信息
- bash - 对当前目录中的每个文件执行 awk?
- css - 我如何先显示侧边栏而不是内容
- python - 如何在数据集中制作包含三个变量的等高线图?
- python - 如何使用 end = "" 命令从 for 循环中添加字符串,Python 3
- javascript - .Onclick 和 .addEventListener("click") 都不限于单击按钮的时间
- python - 是否可以使用 scapy 接收不同进程/线程的 ping 答案
- sql - 在 psql 更新查询中缺少表的 FROM 子句条目