如何解决在其他浏览器中使用网格布局时,调整IE中Flexbox项之间的间距
鉴于IE不完全支持Grid Layout,我仅将Flexbox用于Internet Explorer,并将Grid Layout用于其他浏览器。
有没有一种方法可以仅向IE上的flex项目添加边距/填充,而这不会影响Grid Layout项目?
现在,flexbox项之间没有空格-我知道通常您会在“ .grid article”中添加边距或填充,但是在这种情况下b / c会在其中添加边距或填充不起作用网格项目也是如此(例如,在Chrome的网格布局中)。
.grid {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
display: grid;
justify-content: start;
margin-top: -20px;
}
.grid article {
-ms-flex: 0 0 250px;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
@media (min-width: 800px) {
.grid {
grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
grid-row-gap: 70px;
grid-column-gap: 40px;
}
}
@media (min-width: 600px) and (max-width: 799px) {
.grid {
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
grid-row-gap: 40px;
grid-column-gap: 30px;
margin-top: -15px;
}
}
<div class="grid>
<article>
<a href="#">
<div>Sample content goes here</div>
</a>
</article>
<article>
<a href="#">
<div>Sample content goes here</div>
</a>
</article>
<article>
<a href="#">
<div>Sample content goes here</div>
</a>
</article>
<article>
<a href="#">
<div>Sample content goes here</div>
</a>
</article>
</div>
解决方法
请尝试使用以下方法解决此问题:
方法1:您可以将justify-content添加到.grid
中,以允许IE中的每个元素保持间距。用于设置或检索弹性框元素在主轴(水平轴)方向上的对齐方式:
.grid {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
display: grid;
justify-content: start;
margin-top: -20px;
justify-content: space-between; /*add this line*/
}
方法2:您可以使用媒体查询将CSS中的IE定位为如下所示,然后,媒体查询中的样式仅适用于IE 11,而外部样式将适用于所有浏览器:
@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
/* IE10+ CSS */
.grid article {
-ms-flex: 0 0 250px;
margin-right: 225px;
}
}
.grid article {
-ms-flex: 0 0 250px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。