我有一个网格设置,显示出一些非常奇怪的行为。这似乎是一个错误,但是要使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进行编译)。但是我得到的结果完全一样。
是否有我不知道的已知错误?基本上,这使我的整个网格都无用。非常感谢您的帮助。