无法在 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 与 header div 重叠。

这就是我真正想要的：

Answer 1

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

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

示例代码：

 <: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 浏览器中的 Output：

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

无法在 IE11 中正确对齐网格

问题描述

1 个解决方案

解决方案1
0 2020-04-17 02:47:16

无法在 IE11 中正确对齐网格

问题描述

1 个解决方案

解决方案1 0 2020-04-17 02:47:16

解决方案1
0 2020-04-17 02:47:16