css - Edge 和 IE CSS 网格兼容性

标签 css internet-explorer microsoft-edge css-grid

我最近使用 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;  
}

最佳答案

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

关于css - Edge 和 IE CSS 网格兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55265875/

相关文章:

javascript - 如何使用 JavaScript 在 MS Edge 中获取未知样式规则

javascript - 使用 JavaScript 和 CSS 翻译页面和联系表

javascript - Flip Card CSS 强制我以 px 为单位添加高度

css - 同一行中的两个 PrimeNg 图表

html - Internet Explorer 的投影过滤器?

C# + IE9 JS引擎脉轮?

css - 如何使图像缩小以适合固定位置的 flexbox 模态

html - 长字符串干扰 div 对齐/形成

c# - 用于更改 Internet Explorer 设置的 API(特别是 "Allow mixed content")

css - 复选框勾选在 Edge 浏览器中显示为点