我想使用CSS Grid并使其在IE上工作,但我不知道为什么它不起作用。在Chrome上它看起来非常好。
这就是我的代码的样子:
.container {
color: #fff;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
-ms-grid-gap: 10px 10px;
grid-gap: 10px 10px;
-ms-grid-template-areas:
"header header header"
"aside main section"
"footer footer footer";
grid-template-areas:
"header header header"
"aside main section"
"footer footer footer";
}
.container > * {
background-color: red;
padding: 30px;
}
header {
-ms-grid-area: header;
grid-area: header;
}
aside {
-ms-grid-area: aside;
grid-area: aside;
}
section {
-ms-grid-area: section;
grid-area: section;
}
main {
-ms-grid-area: main;
grid-area: main;
}
footer {
-ms-grid-area: footer;
grid-area: footer;
}
https://jsfiddle.net/erbnw6wm/1/
我找不到grid-gap
,grid-template-areas
和grid-areas
的任何前缀。我只是在他们面前放了一个-ms-
,但那可能是错的。
是否有解决方案,或者我必须等到IE支持它们?