IE中的网格功能查询

时间:2018-10-20 15:59:57

标签: css

我正在使用功能查询,我的目标是在除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;
    }

  }

0 个答案:

没有答案