CSS网格-ms-grid-row和column设置为与实际值相反

时间:2018-09-20 13:00:49

标签: css internet-explorer css-grid autoprefixer

我有一个网格设置,显示出一些非常奇怪的行为。这似乎是一个错误,但是要使CSS Grid在IE10 + 11中正常工作,需要您对所有语法都非常明确。所以我可能在这里错过了一些东西。

#main {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: main;
  display: -ms-grid;
  display: grid;
      -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
      -ms-grid-columns: 15em 1fr;
      grid-template-columns: 15em 1fr;
      grid-template-areas: "sidebar" "content";
}

#main #sidebar {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: sidebar;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  grid-row: 1;
  background: #f4f4f4;
  padding: 1em;
  height: calc(100vh - 145px);
}

#main #content {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: content;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  padding: 1em;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (minmax(min-content, max-content))[2] 1fr (minmax(min-content, max-content))[2];
      grid-template-rows: repeat(2, minmax(-webkit-min-content, -webkit-max-content)) 1fr repeat(2, minmax(-webkit-min-content, -webkit-max-content));
      grid-template-rows: repeat(2, minmax(min-content, max-content)) 1fr repeat(2, minmax(min-content, max-content));
  -ms-grid-columns: 2fr 1fr;
      grid-template-columns: 2fr 1fr;
}

我遇到的问题是#content div的网格设置。我正在设置grid-row: 1/2;grid-column: 2/3;。但是正如您所看到的,autoprefixer会将-ms-grid-row/column设置为完全相反的值。因此,我尝试绕过autoprefixer,并在最终的CSS文件中手动添加IE语法(我从SASS进行编译)。但是我得到的结果完全一样。

是否有我不知道的已知错误?基本上,这使我的整个网格都无用。非常感谢您的帮助。

0 个答案:

没有答案