CSS 即使使用 -ms 前缀,Grid 也无法在 IE11 和 Edge 上运行
CSS Grid not workiing on IE11 or Edge even with -ms prefix
我一直在遵循指南 here 让网格在 IE 11 上运行。我的问题是,即使遵循这些规则,列和行也只是相互重叠,而不是占据它们的网格位置。
这是一个可能导致问题的简单代码示例:
HTML
<div class="grid">
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Left</div>
<div>Bottom Right</div>
</div>
CSS
.grid {
display: -ms-grid;
-ms-grid-columns: 200px 200px;
-ms-grid-rows: 200px 200px;
}
这是一个代码笔link:
https://codepen.io/anon/pen/pdNWMj
我是不是把这段代码弄错了,还是我应该使用 ms 实现的网格以外的东西?
您必须使用 -ms-grid-column
和 -ms-grid-row
指定每个 child 在网格中的位置。
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 200px 200px;
-ms-grid-rows: 200px 200px;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
}
.top-left {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.top-right {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.bottom-left {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.bottom-right {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
<div class="grid">
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-left">Bottom Left</div>
<div class="bottom-right">Bottom Right</div>
</div>
https://codepen.io/anon/pen/ZaBaVa
不如其他浏览器方便...
希望这会有所帮助 ;)
我一直在遵循指南 here 让网格在 IE 11 上运行。我的问题是,即使遵循这些规则,列和行也只是相互重叠,而不是占据它们的网格位置。
这是一个可能导致问题的简单代码示例:
HTML
<div class="grid">
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Left</div>
<div>Bottom Right</div>
</div>
CSS
.grid {
display: -ms-grid;
-ms-grid-columns: 200px 200px;
-ms-grid-rows: 200px 200px;
}
这是一个代码笔link:
https://codepen.io/anon/pen/pdNWMj
我是不是把这段代码弄错了,还是我应该使用 ms 实现的网格以外的东西?
您必须使用 -ms-grid-column
和 -ms-grid-row
指定每个 child 在网格中的位置。
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 200px 200px;
-ms-grid-rows: 200px 200px;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
}
.top-left {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.top-right {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.bottom-left {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.bottom-right {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
<div class="grid">
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-left">Bottom Left</div>
<div class="bottom-right">Bottom Right</div>
</div>
https://codepen.io/anon/pen/ZaBaVa
不如其他浏览器方便... 希望这会有所帮助 ;)