如何在IE11中实现CSS网格?
How to implement CSS Grid in IE11?
我有一个带有两个负责图像的简单网格,但我也需要它在 Internet Explorer 11 中工作。我尝试使用 Autoprefixer
,但没有用。
我的直播代码:https://codepen.io/XTeoos/pen/QWELojR
.grid-container {
display: grid;
grid-template:1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". .";
}
.g1 {
width: 100%;
padding: 0;
margin: 0;
}
<div class="grid-container">
<img class=g1 src="1.jpg">
<img class=g1 src="2.jpg">
</div>
由于 IE 对网格的支持不佳,您必须定义网格列才能正确显示图像。
试试这个
.parent{
display: grid;
display: -ms-grid;
grid-template-columns: 1fr 1fr;
-ms-grid-columns: 1fr 1fr;
}
.image1{
grid-column: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.image2{
grid-column: 2;
-ms-grid-column: 2;
-ms-grid-row: 1;
}
<div class="parent">
<img class="image1" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex" />
<img class="image2" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex2" />
</div>
我有一个带有两个负责图像的简单网格,但我也需要它在 Internet Explorer 11 中工作。我尝试使用 Autoprefixer
,但没有用。
我的直播代码:https://codepen.io/XTeoos/pen/QWELojR
.grid-container {
display: grid;
grid-template:1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". .";
}
.g1 {
width: 100%;
padding: 0;
margin: 0;
}
<div class="grid-container">
<img class=g1 src="1.jpg">
<img class=g1 src="2.jpg">
</div>
由于 IE 对网格的支持不佳,您必须定义网格列才能正确显示图像。 试试这个
.parent{
display: grid;
display: -ms-grid;
grid-template-columns: 1fr 1fr;
-ms-grid-columns: 1fr 1fr;
}
.image1{
grid-column: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.image2{
grid-column: 2;
-ms-grid-column: 2;
-ms-grid-row: 1;
}
<div class="parent">
<img class="image1" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex" />
<img class="image2" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex2" />
</div>