无法使网格在IE11中正确对齐

Question

我在使网格在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与标题div重叠。

这就是我真正想要的：

Answer 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浏览器中的输出：

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

无法使网格在IE11中正确对齐

问题描述投票：1回答：1

1个回答

最新问题

无法使网格在IE11中正确对齐

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1