無法在 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