本文介绍了尽管有前缀,CSS Grid也无法在ie11中工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下使用CSS网格的简单布局示例
I have the following simple layout example using CSS grid
.container {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.item1 {
text-align:center;
background:red;
color:white;
padding:20px
}
.item2 {
text-align:center;
background:green;
color:white;
padding:20px
}
.item3 {
text-align:center;
background:blue;
color:white;
padding:20px
}
<div class="container">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
I有前缀,即特定前缀,但在ie11中网格无法正常工作。我是否缺少前缀?
I have prefixed with ie specific prefixes but the grid is not working correctly in ie11. Am I missing a prefix?
有人知道为什么吗?
推荐答案
IE没有自动流动的网格元素。您需要为每个网格元素分配一个特定的网格位置,否则每个未放置的元素最终都会堆叠在1,1中。
IE does not have auto-flow of grid elements. You need to assign a specific grid position to each grid element, otherwise each non-placed element ends up stacked in 1,1.
.container {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.item1 {
text-align: center;
background: red;
color: white;
padding: 20px;
-ms-grid-column: 1;
}
.item2 {
text-align: center;
background: green;
color: white;
padding: 20px;
-ms-grid-column: 2;
}
.item3 {
text-align: center;
background: blue;
color: white;
padding: 20px;
-ms-grid-column: 3;
}
<div class="container">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
这篇关于尽管有前缀,CSS Grid也无法在ie11中工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!