Некорректный вид сайта в Internet Explorer

Question

В Explorer футер поднимается к веру и закрывает часть контента, на отдельный страницах центральный блок растягивается и выглядит некорректно. В других браузерах все выглядит, как нужно. Валидатор ошибок не находит. HTML:1)body 2) header 3)main 4) Footer.SCC:

body {
  background: url(img/fon10.jpg) no-repeat;
 background-size: cover;
 display: flex;
 flex-direction: column;
 height: 100%;
  }
html {
  min-height: 100%;
.main {
  min-height: 100%;
  padding-bottom: 550px;/*отступ полжен быть больше футера, чтобы не закрывал контент*/
}
footer {
  position: relative;
  margin-top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#2E1114;
  max-width: 100%;
  min-height: 300px;
  padding: 2rem 5%;

Answer 1

height: 100%;

Это в приведённом коде не работает.

html {
  min-height: 100%;
.main {

Фигурную скобку закрывать кто будет?

padding-bottom: 550px;/отступ полжен быть больше футера, чтобы не закрывал контент/

Какой box-sizing?
IE не умеет флекс-элементы с border-box.
Нафига вообще так делать, если у тебя флекс??

footer {
  position: relative;

Снова фигня. Судя по остальному коду должно быть absolute.

Вот так должно работать, впрочем, в IE сейчас не проверял. Если речь об IE10, то надо добавить префиксы.

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

body > * {
  flex: 0 0 auto;
}

.main {
  flex: 1 0 auto;
}

footer {
  min-height: 60px;
  padding: 1em;
  box-sizing: border-box;
  background: silver;
}

main {
  padding: 1em;
}

<div class="main">
  <main>Main</main>
</div>

<div class="footer">
  <footer>Footer</footer>
</div>

БЛОГ НА HUSL

Некорректный вид сайта в Internet Explorer

Ответы (1 шт):