Не удается заставить сетку правильно выравниваться в IE11 - PullRequest
Новая
       35

Не удается заставить сетку правильно выравниваться в IE11

1 голос
/ 16 апреля 2020

У меня проблемы с отображением сетки на 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, когда я хочу, чтобы он отображался снизу.

Overlapping text

Вот как я действительно этого хочу:

enter image description here

1 Ответ

0 голосов
/ 17 апреля 2020

Я попытался проверить проблему, и я могу создать проблему с вашим примером кода.

Я пытаюсь обратиться к некоторым статьям и попытаться разработать один пример, используя сетку, которая похожа на вывод Вы разместили выше. Это также выглядит аналогично в других браузерах.

Пример кода: 

<!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:

enter image description here

Далее , вы можете попробовать изменить этот пример кода в соответствии с вашими требованиями.

...