Edge＆IE CSS网格兼容性

Question

我最近使用CSS Grid重新开发了我的网站。它适用于我尝试过的所有浏览器，但Edge＆IE的行高很大。我也没有运气尝试过Autoprefixer。在Edge＆IE以外的浏览器中，显示也响应。我的CSS代码如下，我将不胜感激任何建议：

@charset "utf-8";

body {
  background: #a1dada;
  /* padding: 3rem 5rem; */
}

.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, 0.1fr);
    border-left: 10px ridge #fffb00;
    border-top: 10px ridge #fffb00;
    border-bottom: 10px ridge #fffb00;
    border-right: 10px ridge #fffb00;
    border-top-right-radius: 15px;    
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: white;
    /*background-image: linear-gradient(to bottom,lightblue, rgba(158, 221, 55, 0.212));*/
  }
    
  .item1 {
    grid-area: 1/2/1/5;
    font-size: 3.5vw;
	  font-weight: bolder;
	  color: black;
	  text-align: center;
    margin-top:3vh;
  }

   .item2 {
    grid-area: 2/2/2/5;
    text-align: center;
	  font-weight: bold;
	  color: rgb(5, 83, 40);
	  font-family: "Patua One";
	  font-style: normal;
	  text-transform: uppercase;
    font-size: 1vw;
    margin: 2vh; 
  }

  .item3 {
    grid-area: 3/2/3/5;
    text-shadow: 1px 1px 2px #000000;
	  text-align: center;
	  font-weight: bolder;
	  color: rgb(91, 41, 226);
	  font-family: "Patua One";
	  font-style: normal;
	  font-size: large;
	  font-size: 1.75vw;
    text-transform: uppercase;
    margin: 2vh; 
  }

  .item4 {
    grid-area: 4/2/4/5;
    text-shadow: 0px 0px #FFFFFF;
	  text-align: center;
	  font-size: 1.2vw;
	  font-family: "Patua One";
	  font-weight: bold;
	  color: #000000;
    margin: 2vh; 
  }
  .item5 {
    grid-area: 1/1/5/2;
    background-image: url('PowerPoint Fill Shape.png');    
    width: 96%;
     
    background-repeat: no-repeat;    
    background-position: center;
    border-right: thick ridge rgb(240, 236, 224);
    border-width: 9px;
  }

  .services-title {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-top: 5px; 
    background-color: white;
    color: #1318E7;
    font-size: 1.5vw;
    font-weight: bolder;
    border-left: thick ridge rgb(240, 236, 224);
    border-width: 9px;
  }

  .services-list {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 5;
    background-color:white;
    margin-top: -20px;
    padding-left: 20px;
    color: #000000;
    font-weight: bold;
    font-size: 1.25vw;
    line-height: 1.5em;
    border-left: thick ridge rgb(240, 236, 224);
    border-width: 9px;
  }

  .navmenu {
    grid-row-start: 5;
    grid-row-end: 6;
    text-align: center;
    background-color: #006500;
    border: thick ridge #CC9900;
    border-radius: 6px;
    padding-top: 15px;
    padding-bottom: 15px;
    }
    
  .navmenu > a {      
    font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
    text-decoration: none;
    color: #FFF;
    text-shadow: 2px 2px 2px #000;
    font-size:1.4vw;
 }

  .navmenu a:hover {
	  color: rgb(236, 11, 11);
	  font-weight: bolder;
 }

.rightmain  {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 7;
    background-color: #FFFFD6;
    padding-left: 40px;
    padding-bottom: 20px;
    color: #000000;
    font-weight: bold;
    font-size: 1.3vw;
    line-height: 2em;
}

.center {    
    grid-area: 6/3/8/4;
    background-image: url('Patent-Img-ResG.jpg');    
    background-size: contain;
    padding: 3px;  
    background-position: top;
}

.leftmain {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 7;
    background-color: #FFFFD6;
    padding-left: 40px;
    padding-bottom: 20px;
    color: #000000;
    font-weight: bold;
    font-size: 1.3vw;
    line-height: 2em;
}

.leftmaintitle {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 6;
    padding-left: 40px;
    padding-bottom: 10px;
    background-color: #FFFFD6;
    color: #1318E7;
    font-size: 1.3vw;
    margin-bottom: -1.5em;
}

.rightmaintitle {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;
    padding-left: 40px;
    padding-bottom: 10px;
    background-color: #FFFFD6;
    color: #1318E7;
    font-size: 1.3vw;
    margin-bottom: -1.5em;
}

.foot {
    grid-column-start: 3;
    grid-row-start: 7;
    align-self: end;
    background-color: #FFDAB5;
    border-color: #000000;
    border-style: ridge;
    text-align: center;
    border-radius: 5px;
    height: 25px;
    font-weight: bolder;
    font-size: 1.2vw;  
}

Answer 1

发现了问题。 Edge无法识别行高的“ fr”。