CSS Макет сетки IE11 не учитывает размеры - PullRequest
Новая
       9

CSS Макет сетки IE11 не учитывает размеры

2 голосов
/ 28 мая 2020

Я искал в Google эквивалент display: grid и grid-template-columns в IE11, но не могу заставить его работать, как в chrome, что я делаю не так? Также я вставил свой код во фрагмент, но желтая полоса здесь не отображается 

.ctn_mapa_hoteles {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 300px 790px auto;
  -ms-grid-columns: 300px 790px auto;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}
<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">
  </div>
  <div class="col_ctn_hoteles">
  </div>
  <div class="col_ctn_mapa">
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 28 мая 2020

IE 11 требует также указать каждому ребенку, где стоять внутри сетки: 

.ctn_mapa_hoteles {
  grid-template-columns: 300px 790px auto;
  display: grid;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}
/* IE11 fix grid layout */
.ctn_mapa_hoteles {
  display: -ms-grid;
  -ms-grid-columns: 300px 790px 1fr;/* note 1fr instead auto */
}

.col_ctn_filtros {
  -ms-grid-column:1;
}

.col_ctn_hoteles {
  -ms-grid-column:2;
}

.col_ctn_mapa {
  -ms-grid-column:3;
}
<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">12
  </div>
  <div class="col_ctn_hoteles">45
  </div>
  <div class="col_ctn_mapa">78
  </div>
</div>

jsbin, который можно запустить в IE11: https://jsbin.com/qiwehinuwi/1/edit?html, css, output

auto-flow специфичность недоступна, для другого типа макета, использующего автоматический поток для заполнения сетки, вам нужно будет установить альтернативный макет для IE, вот еще один вопрос с примером IE11: Адаптивный макет при использовании сетки

1 голос
/ 28 мая 2020

У меня была такая же проблема. IE не подходит для разработчиков. И у Grids, и у Flexbox есть преимущества, и мне нравится использовать Grids. Насколько мне известно, IE не поддерживает гриды. Следовательно, необходимо добавить резервный вариант Flexbox. Вы делаете это через СМИ. 

 // for IE 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

// flexbox code will go here

.yourdivclassname {
  display: inline-flex;

}

}

для всех остальных браузеров с поддержкой Grid (Firefox, Chrome, Edge и др. c) 

@supports (display: grid) {

.yourdivclassname {
   display: grid;

}
}

Вот как мне удалось сохранить дизайн моих веб-страниц согласован во всех браузерах. Я начинаю с дизайна сетки. Как только я получу то, что мне нужно, я копирую его в дизайн Flexbox и заменяю ссылки на Grids ссылками Flexbox.

Отличное руководство для Flexbox Flexbox Tutorial

Отличное руководство для Grids Grids Tutorial

...