Как заставить мою CSS-сетку работать на Firefox и IE 11?

Question

С приведенным ниже кодом css-grid отображается без проблем в Firefox, Opera и Chromium Browser

body {
  background-color: #ebf5d7;
  grid-gap: 5px;
  grid-template-columns: 10% 72% 17%;
  grid-template-areas:


  "header   header   header"
  "nav      nav      nav" 
  "linkBox  linkBox  linkBox"
  "main     main     main"
  "infoBox  infoBox  infoBox"
  "footer   footer   footer" ;
}



body > header {

    grid-area: header;
    background-image: url("/Bilder/f409784856.png");
    padding: 60px;

}

body > nav {
 grid-area: nav;
 background-color: #d2f5c4;

}

body > #externalLinks {
 grid-area: linkBox;
 background-color:  #d2f3c6;

}
body > main {
 grid-area: main;
 background-color: #eaf6e5;
}

body > #furtherInformation {
 grid-area: infoBox;
 background-color: #d2f3c6;
}

body > footer {
 grid-area: footer;
 background-color: #99ee7a;

}

Скриншот того, как выглядит Firefox:

Теперь, запустив приведенный ниже код в IE, он выглядит так:

body {

display: grid;
display: -ms-grid;
width: 100%;
height: 250px;

-ms-grid-columns: 9% 73% 17%;

-ms-grid-rows:  120px 80px 103px 200px 110px 70px;
 background-color: #ebf5d7;
 margin: 5px;
}
body > header {
 -ms-grid-column: 1;
 -ms-grid-column-span: 3;
 -ms-grid-row: 1;
 -ms-grid-row-span: 1;

  background-image: url("/Bilder/f409784856.png");

  background-repeat: no-repeat;
  padding: 60px;
}

body > nav {

 -ms-grid-column: 1/3;
 -ms-grid-column-span: 3;
 -ms-grid-row: 2;

 background-color: #d2f5c4;
 margin: 5px;
}

body > #externalLinks {

  -ms-grid-column: 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
   margin: 5px;
   background-color:  #d2f3c6;

}
body > main {

 display: block; 
 -ms-grid-column: 2; 
 -ms-grid-row: 3;
 -ms-grid-row-span: 3;
 margin: 5px;

 background-color: #eaf6e5;
}

body > #furtherInformation {

  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
   margin: 5px;
   background-color: #d2f3c6;

}
body > footer {

    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    margin: 5px;
    background-color: #99ee7a;
}

Как видите, оба кода (IE 11 и Firefox) работают

что следует за двумя фрагментами кода выше (IE и Firefox) здесь .

Я хочу использовать оба варианта в одном файле, но моя сетка не работает должным образом в Firefox.

Как использовать один файл и при этом поддерживать Firefox и IE?

Answer 1

Я нашел решение моей проблемы!

Спасибо на этом сайте я нашел решение моей проблемы .., с Flexbox Fallbacks ... решениеэто построить новый контейнер с Flexbox для IE 11 ...

Теперь иметь оба кода в одном файле, как это показать ..

body {

  display: grid;    
  background-color: #ebf5d7;
  grid-gap: 5px;
  grid-template-columns: 10% 72% 17%;
  grid-template-areas:

   "header   header    header"
   "nav      nav          nav"
   "linkBox  main     infoBox"
   "footer   footer   footer";
}


body > header {
grid-area: header;
background-image: url("/Bilder/f409784856.png");
    padding: 60px;

}

body > nav {
 grid-area: nav;
 background-color: #d2f5c4;

}

body > #externalLinks {
 grid-area: linkBox;
 background-color:  #d2f3c6;

}
body > main {
  grid-area: main;
  background-color: #eaf6e5;
}

body > #furtherInformation {
  grid-area: infoBox;
  background-color: #d2f3c6;
}

body > footer {
 grid-area: footer;
 background-color: #99ee7a;

}

          /* IE 11 */

body {

   display: flex;
   flex-wrap: wrap;
   autoprefixer({ grid: true })
   width: 100%;
   background-color: #ebf5d7;



} 
body > header {
   flex-basis:100%;
   margin: 5px;
   background-image: url("/Bilder/f409784856.png");

}

body > nav {
    flex-basis:100%;
    margin: 5px;
    background-color: #d2f5c4; 
    -ms-grid-column: 1;
    -ms-grid-column-span: 2; 
    -ms-grid-row: 2;
} 

body > #externalLinks {

   flex-basis:8%;
   margin: 5px;
   background-color:  #d2f3c6;
   -ms-grid-column: 1;
   -ms-grid-row: 3;
}
body > main {
  flex-basis:68%;
  margin: 5px;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 4;
  background-color: #eaf6e5;
}

body > #furtherInformation {
  flex-basis: 20.4%;
  margin: 5px;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  background-color: #d2f3c6;
}

body > footer {
    flex-basis:100%;
    margin: 5px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    background-color: #99ee7a;
}

Каксм. мой IE 11

и мой Firefox ...