我正在使用功能查询,我的目标是在除IE之外的所有浏览器上显示网格。 IE不支持功能查询,因此功能查询中的所有代码都将被忽略。
它在IE中对我有效,但是在Chrome /所有其他浏览器上,功能查询之外的代码正在应用样式,但是功能查询仍然像显示grid
一样工作,但仍使用{{ 1}} / margin
来自功能查询之外的代码。有办法解决吗?
功能查询
padding
正在应用的功能查询之外的样式
@supports(grid-auto-rows:auto){
.Gallery{
display:-ms-grid;
display:grid;
grid-gap: 5px;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
grid-auto-rows:95px;
grid-auto-flow: dense;
}
.horiz{
-ms-grid-column-span: 2;
grid-column: span 2;
}
.vert{
-ms-grid-row-span: 2;
grid-row: span 2;
}
.big{
-ms-grid-column-span:2;
grid-column:span 2;
-ms-grid-row-span: 2;
grid-row: span 2;
}
.imgContainer {
width: 100%;
height: 100%;
}
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}