html - IE11 中的 CSS 网格布局，内容间隙较大

Question

我在页面上使用 CSS 网格布局，但它在 IE11 上的两个网格元素之间产生了巨大的内容差距:

这在 Chrome 和 FF 中显然没问题。这就是我的 CSS，我已经通过 AutoPrefixer 运行了:

.row--grid {
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: 2fr 1fr;
  grid-template-columns: 2fr 1fr;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  margin-left: -15px;
  margin-right: -15px;
} 
.row--grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.row--grid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;

}

.row--grid > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;

}

.row--grid > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;

}

.top__content {
  -ms-grid-column: 1;
  grid-column: 1;
}

.sidebar__col {
  -ms-grid-column: 2;
  grid-column: 2;
  grid-row: 1 / -1;
  margin-left: 50px;
  width: 100%;
  padding-right: 20px;
  max-width: 320px;
}

.main__content {
  -ms-grid-column: 1;
  grid-column: 1;
}

HTML:

<div class="row--grid">
 <div class=" top__content">
  <h1>Title...</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>                                                   
 </div>
 <div class="sidebar__col">
  <h2>Sidebar</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
 <div class="main__content">
  <h3>Other Content Area</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 </div>
</div>

我开始把它搞得一团糟，我注意到:

.row--grid > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;

}

看起来它正在造成差距。唯一的问题是我不确定是否有什么可以控制 auto 的东西？仍然围绕着 CSS 网格，然后尝试调试 IE 像往常一样有问题。

Answer 1

重现我这边的问题，在 IE/Edge 浏览器中，侧边栏单元格与 top__content 单元格位于同一行。因此，如果它太高，top__content 将自动更改高度属性以使其保持网格布局。但在 Chrome 浏览器中，侧边栏单元格占据两行。

这似乎是浏览器的问题，IE/Edge 浏览器无法使用“-ms-grid-row: 1/span 2;”合并单元格的方法，如果我们想合并单元格，我们可以使用“-ms-grid-row-span”设置侧边栏单元格，使其跨越两行。

使用以下代码:

        .row--grid > *:nth-child(2) {
            -ms-grid-row: 1;
            -ms-grid-column: 2;
            -ms-grid-row-span:2;
        }

然后结果like this