如何使我的CSS网格在Firefox和IE 11上均可工作？

Question

使用以下代码，css-grid可以在Firefox，Opera和Chromium浏览器上显示没有问题

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）here的内容。

我想在一个文件中同时使用这两种版本，但是我的网格无法在Firefox上正常工作。

我如何使用单个文件并且仍然支持Firefox和IE？

Answer 1

我找到了问题的解决方案！

感谢this网站，我找到了解决问题的方法..，通过 Flexbox后备广告 ...，解决方案是使用 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 ...