如何使所有浏览器的尺寸相同

Question

我制作了一个只能在google chrome上正常运行的网络应用程序。当我尝试在Microsoft Edge上运行时，它无法正常工作。框在Microsoft Edge上具有不同的高度和宽度。您可以在下面查看图像和我的CSS代码。如何使它适用于所有网络浏览器？

谷歌浏览器 微软边缘

 html, body { margin: 0; height: 100%;   background-color: black;} 
    .grid-container * { }
    .grid-container div:after 
    {  
      content: ''; color: #888; 
      display: flex; justify-content: center; 
      align-items: center; height: 100%; font-family: arial;
        background-color: #2A2A2A;
    }
    .grid-container 
    {   padding:5px;
        height:100%;
        width:1890px;
        display: grid;    
        grid-template-columns: 0.5fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr; 
       grid-template-rows: 0.25fr 1fr 1fr 1fr 1fr;  grid-gap: 10px 10px;
       background-color: black;  
       grid-template-areas: 
           'Header Header Header Header Header Header Header' 
           'Menu Box1 Box1 Box2 Box2 Box3 Box4' 'Menu Box5 Box5 Box6 Box6 Box6 Box7' 
           'Menu Box5 Box5 Box6 Box6 Box6 Box8' 'Menu Box9 Box10 Box11 Box12 Box13 Box14'
           ;}
    .btn-group button {
        background-color: #1F1F1F; /* Green background */
        border: 1px solid black; /* Green border */
        color: white; /* White text */
        padding: 10px 20px; /* Some padding */
        cursor: pointer; /* Pointer/hand icon */
    }
    img {
        border-radius: 4px;
        width: 100px;
       }
    .btn-group:after {
        content: "";
        clear: both;
        display: table;
    }
    .btn-group button:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

    .btn-group button:hover {
        background-color: #335280;
    }
    .btn-group button:focus {
        background-color: #335280;
    }

    .Header { grid-area: Header; }
    .Menu { grid-area: Menu; 
         height:0px;
    }
    .Box1 { grid-area: Box1;}
    .Box2 { grid-area: Box2;

      }
    .Box3 { grid-area: Box3;
            }
    .Box4 { 
         background: #2a2a2a;
        grid-area: Box4;
    }
    .Box5 { grid-area: Box5; 
         height:0px;
              width:0px;
    }
    .Box6 { grid-area: Box6; 

    }
    .Box7 { grid-area: Box7; }
    .Box8 { grid-area: Box8; }
    .Box9 { grid-area: Box9; }
    .Box10 { grid-area: Box10; }
    .Box11 { grid-area: Box11; }
    .Box12 { grid-area: Box12; }
    .Box13 { grid-area: Box13; }
    .Box14 { grid-area: Box14; }
    #chart {
          height: 100%;       
    }
    .dx-viewport
    {
      background-color: #2A2A2A;
    }
    #gauge {
        height: 100%;
    }
    #gaugeContainer {
        height: 100%;
    }
    .foo {
      float: left;
      width: 0px;
      height: 70px;
      margin: 10px;
      margin-bottom:20px;
    }
    .blue {
      background: #5c5c5c;
    }
    .value {
            margin-left:30px;
            font-size: 45px;
            color: white;
    }
    .value2 {
            margin-left:25px;
            font-size: 17px;
            color: #5c5c5c;
    }
    .value3{
            margin-left:30px;
            margin-top:12px;
            font-size: 20px;
            color: white;
    }
    .value4 {
            margin-left:25px;
            font-size: 17px;
            color: #5c5c5c;
            margin-bottom:25px;
    }
    .inner-grid {
      display: grid;
      grid-template-columns:1fr ;
      grid-gap: 10px;

    }
    .inner-grid > div {
      padding: 8px;
        margin-top:0px;

    }
    .title{
        font-size: 20px;
        color: white;
    }
    .btn-group2 button {
        background-color: #2A2A2A;
        border: 0px solid green; /* Green border */
        color: white; /* White text */
        padding: 20px; /* Some padding */
        font-size: 30px;
        height:102px;
        cursor: pointer; /* Pointer/hand icon */
        float: left; /* Float the buttons side by side */
    }

    /* Clear floats (clearfix hack) */
    .btn-group2:after {
        content: "";
        clear: both;
        display: table;
    }

    .btn-group2 button:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

    /* Add a background color on hover */
    .btn-group2 button:hover {
        background-color: #3e8e41;
    }