无法在 IE11 中正确对齐网格答案

【问题标题】：Cannot get grid to align properly in IE11无法在 IE11 中正确对齐网格
【发布时间】：2020-07-30 01:51:19
【问题描述】：

我在让网格在 IE 上正确显示时遇到问题。我想避免使用自动前缀并且需要一些简单的东西。我希望这是我错过的东西。我有以下 CSS 代码：

.container {
  padding: 20px;
  display: grid;
  display: -ms-grid;
  grid-template-columns: [colstart] min-content [col1] 1fr [colend];
  grid-template-rows: [rowstart] 0fr [row1] 1fr [rowend];
  -ms-grid-columns: min-content 1fr;
  -ms-grid-rows: 0fr 1fr;
}

.image {
  grid-column: colstart/col1;
  grid-row: rowstart/rowend;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.header {
  grid-column: col1/colend;
  grid-row: rowstart/row1;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

.text {
  grid-column: col1/colend;
  grid-row: row1/rowend;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

以及以下 HTML：

<div class="container">
    <div class="image">
       // ...image
    </div>
    <div class="header">
       <h3>{data.title}</h3>
       <div class="social">
           // ...social icon
       </div>
    </div>
    <div class="text">
       // ...text
    </div>
</div>

除文本外的所有内容都显示正确。当我希望它显示在下面时，文本 div 与标题 div 重叠。

这就是我真正想要的：

【问题讨论】：

你看过这篇文章了吗？ stackoverflow.com/q/45786788/3597276
Grid 在 IE 中的支持非常有限：caniuse.com/#search=display%20grid，因此您需要使用任何可以使其工作的前缀。这篇文章，系列的第二篇，应该对你很有帮助：css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer
@Nathanial Flick。有没有办法用其他东西来做这个布局？柔性？其他一切都太复杂了，需要太多时间。
@StormParker 对于 IE，我认为您需要使用后备或浮动。但也有无序列表可以很好地工作。
@NathanielFlick 无序列表？我现在真的无法想象。

标签： html css internet-explorer internet-explorer-11 css-grid

【解决方案1】：

我尝试测试该问题，并且能够使用您的示例代码产生该问题。

我尝试参考一些文章并尝试使用与您在上面发布的输出相似的网格开发一个示例。它在其他浏览器中看起来也很相似。

示例代码：

<!doctype html>
<html>
<head>
<style>
body {
  margin: 40px;
}

.wrapper {
  display: -ms-grid;
  display: grid; 
  -ms-grid-columns: [colstart] min-content [col1] 1fr [colend];
  grid-template-columns: [rowstart] 0fr [row1] 1fr [rowend];
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
 
  padding: 20px;
  font-size: 100%;
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.title
{
width:70%;
float:left;
height:60px;

}
.social
{
margin-left:30%;
padding-top:20px;
height:60px;
}

</style>
</head>
<body>
<div class="wrapper">
  <div class="box a"> <div class="image">
       <img src="https://i.postimg.cc/9QD1fcWq/icons8-user-100.png" height="200px" width="200px"></img>
    </div></div>
  <div class="box b"> 
	<div class="title"><h2>FN LN abc</h2></div>
       <div class="social">
           <img src="https://i.postimg.cc/43TtTGnG/twitter-icon.png"></img>
	         <img src="https://i.postimg.cc/mZFHhhM4/fb-icon.png"></img>
           <img src="https://i.postimg.cc/43TtTGnG/twitter-icon.png"></img></div>
  
     
 Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
	Test Test Test Test Test Test Test Test  </div>
</body>
</html>

在 IE 11 和 Google Chrome 浏览器中的输出：

此外，您可以尝试根据您的要求修改此示例代码。

【讨论】：