CSS Сетка не работает в Inte rnet Explorer - PullRequest
Новая
       163

CSS Сетка не работает в Inte rnet Explorer

0 голосов
/ 06 августа 2020

Эта сетка CSS работает во всех браузерах, кроме rnet проводника. После выхода Edge он работает, но у людей, использующих устаревшее программное обеспечение, будут проблемы. Как я могу заставить эту сетку работать во всех браузерах, или мне нужно прибегать к div? 

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0;
  grid-template-areas: "Tall top left ." "Tall bottom- right ." ". . . .";
}

.Tall { grid-area: Tall; }

.top { grid-area: top; }

.left { grid-area: left; }

.bottom- { grid-area: bottom-; }

.right { grid-area: right; }
    
    
    .grid-container div{background-color: red; width:200px; height: 200px}  

</style>


<div class="grid-container">
  <div class="Tall"></div>
  <div class="top"></div>
  <div class="left"></div>
  <div class="bottom-"></div>
  <div class="right"></div>
</div>```

1 Ответ

1 голос
/ 07 августа 2020

Я попытался использовать онлайн-инструмент Autoprefixer CSS , чтобы добавить автоматический префикс для вашего кода CSS, и я вижу, что он дает тот же результат, что и другие браузеры.

Модифицированный код: 

<!doctype html>
<html>
<head>
<style>
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0 1fr 0 1fr 0 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 0 1fr 0 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0;
      grid-template-areas: "Tall top left ." "Tall bottom- right ." ". . . .";
}

.Tall { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: Tall; }

.top { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: top; }

.left { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: left; }

.bottom- { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: bottom-; }

.right { -ms-grid-row: 3; -ms-grid-column: 5; grid-area: right; }
    
    
    .grid-container div{background-color: red; width:200px; height: 200px}
</style>
</head>
<body>

<div class="grid-container">
  <div class="Tall"></div>
  <div class="top"></div>
  <div class="left"></div>
  <div class="bottom-"></div>
  <div class="right"></div>
</div>
</body>
</html>

Вывод:

введите описание изображения здесь

...