Cannot get grid to align properly in IE11
Question
I am having issues getting a grid to display correctly on IE. I want to avoid autoprefixers and need something simple. I hope it's something that I missed. I have the following CSS code:
.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;
}
and the following 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>
Everything except the text is displaying correct. The text div is overlapping the header div when I want it to display underneath.
This is how I really want it:
1 answers
solution1
0 2020-04-17 02:47:16
I tried to test the issue and I am able to produce the issue with your sample code.
I try to refer to some articles and try to develop one example using a grid that looks similar to the output you posted above. It also looks similar in other browsers.
Example code:
<: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>
Output in IE 11 and Google Chrome browser:
Further, you can try to modify this sample code as per your requirements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.