如何在IE11中实现CSS网格?

问题描述 投票:0回答:2

我有一个简单的网格,其中有两个负责的图像,但我也需要它在 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>

html css internet-explorer-11 grid-layout
2个回答
2
投票

由于 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>


0
投票

我写了一个由 4 部分组成的 CSS 技巧系列,解释如何在 IE11 中使用 CSS 网格。

第 2 部分,我解释了如何使用 autoprefixer 为您自动化大部分工作。

该系列从这里开始: 揭穿常见的 IE 网格误解

© www.soinside.com 2019 - 2024. All rights reserved.