基本CSS代码适用于Chrome但不适用于Firefox

Question

www.prismasites.com

定价部分：

3个定价计划的DIV盒子使用chrome显示正常大小，但使用Firefox看起来非常小。

这是我的DIV代码

    #Pricing {
      height: 100vh;
      width: 100%;
      background: #CEC8B6;
      position: relative;
      border: 0px solid black;
      top: 0px;
    }
    #PricingHeader1 {
      height: 5vh; width: 100%; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/DollarBorderTop.jpg"); background-size: 100% 100%; position: absolute; top: 0px; margin: 0; padding: 0; border: 0px solid black; z-index: 999; }
      #PricingInfo {
        overflow: hidden;
        height: 9%;
        width: 95%;
        top: 6%;
        border: 0px solid green;
        position: relative;
        margin: auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      #PricingBoxContainer {
        height: 65vh;
        width: 100%;
        position: relative;
        top: 8%;
        border: 0px solid green;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      .PricingBoxContainers {
        height: 65vh;
        width: calc(100% / 3);
        position: relative;
        display: inline-block;
        float: left;
        top: 0%;
        border: 0px solid orange;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      #PricingBox1000Margin {
        height: 100%;
        width: 100%;
        position: relative;
        display: table;
        align-items: center;
        display: flex;
        justify-content: center;
        margin: auto;
        padding: 0;
        border: 0px solid black;
        z-index: 999;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      #PricingBox1000 {
        height: 90%;
        width: 90%;
        position: relative;
        display: table-cell;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 0;
        border: 0px solid black;
        z-index: 999;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      #PricingBox1700 {
        height: 100%;
        width: 90%;
        position: relative;
        display: inline-block;
        margin: 0 auto;
        padding: 0;
        border: 0px solid black;
        z-index: 999;
      }
      #PricingBox2500 {
        height: 100%;
        width: 90%;
        position: relative;
        display: inline-block;
        right: 1.5%;
        margin: 0;
        padding: 0;
        border: 0px solid black;
        z-index: 999;
      }
      #PB1000TLCorner {
        height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TLCorner.png"); background-size: 100% 100%;   box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
        #PB1000TMBorder {
          height: 5%; width: 90%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TBorder.png"); background-size: 100% 100%;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
          #PB1000TRCorner {
            height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green;  background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TRCorner.png"); background-size: 100% 100%;   box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
            #PB1000MLBorder {
              height: 90%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/LBorder.png"); background-size: 100% 100%;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
              #PB1000Containr {
                vertical-align: top;
                height: 90%;
                width: 90%;
                position: relative;
                display: inline-block;
                top: 0%;
                border: 0px solid green;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #Pricing1000Title {
                height: 7.5%;
                width: 100%;
                position: relative;
                border: 1px solid black;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #Pricing1000Price {
                height: 7.5%;
                width: 100%;
                position: relative;
                border: 1px solid black;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #Pricing1000InfoContainer {
                height: 70%;
                width: 100%;
                position: relative;
                border: 1px solid black;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #Pricing1000Services {
                vertical-align: top;
                height: 100%;
                width: 50%;
                position: relative;
                display: inline-block;
                border: 1px solid black;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #Pricing1000Payments {
                vertical-align: top;
                height: 100%;
                width: 50%;
                position: relative;
                display: inline-block;
                border: 1px solid black;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #Pricing1000SummaryContainer {
                height: 15%;
                width: 100%;
                position: relative;
                border: 1px solid black;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
              }
              #PB1000MRBorder {
                height: 90%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/LBorder.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleX(-1);-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
                #PB1000BLCorner {
                  height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TLCorner.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleY(-1);-o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
                  #PB1000BMBorder {
                    height: 5%; width: 90%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TBorder.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleY(-1);-o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
                    #PB1000BRCorner {
                      height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TRCorner.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleY(-1);-o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
                      #PricingDisclaimer {
                        height: 9%;
                        width: 95%;
                        top: 10%;
                        border: 0px solid green;
                        position: relative;
                        font-size: 75%;
                        margin: auto;
                        overflow: hidden;
                      }
                      .PricingServices {
                        color: #006838;
                      }
                      #PricingHeader2 {
                        height: 5vh;
                        width: 100%;
                        background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/DolarBorder1.jpg");
                        background-size: 100% 100%;
                        position: absolute;
                        bottom: 0px;
                        margin: 0;
                        padding: 0;
                        border: 0px solid black;
                        z-index: 999;
                      }

<div id="Pricing">
  <div id="PricingHeader1"></div>

  <div id="PricingInfo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla tempus semper. Nam ut gravida odio. Morbi feugiat iaculis nisl, tincidunt congue arcu sagittis id. Duis fermentum mauris ut justo malesuada auctor. Nullam aliquam sit amet ante sit
    amet rhoncus. Suspendisse varius ultricies facilisis. Ut auctor ligula pretium dapibus vestibulum. Sed ac libero auctor, consectetur sapien nec, laoreet lacus. Sed porta est nec massa luctus, eget mollis magna malesuada. Sed pharetra convallis turpis,
    vel eleifend orci lacinia non. Ut mi lacus, accumsan eget arcu porttitor, viverra pellentesque quam.</div>

  <div id="PricingBoxContainer">
    <div class="PricingBoxContainers">
      <div id="PricingBox1000Margin">
        <div id="PricingBox1000">
          <div id="PB1000TLCorner"></div>
          <div id="PB1000TMBorder"></div>
          <div id="PB1000TRCorner"></div>
          <div id="PB1000MLBorder"></div>
          <div id="PB1000Containr">
            <div id="Pricing1000Title"></div>
            <div id="Pricing1000Price"></div>
            <div id="Pricing1000InfoContainer">
              <div id="Pricing1000Services"></div>
              <div id="Pricing1000Payments"></div>
            </div>
            <div id="Pricing1000SummaryContainer"></div>
          </div>
          <div id="PB1000MRBorder"></div>
          <div id="PB1000BLCorner"></div>
          <div id="PB1000BMBorder"></div>
          <div id="PB1000BRCorner"></div>
        </div>
      </div>
    </div>
    <div class="PricingBoxContainers">
      <div id="PricingBox1000Margin">
        <div id="PricingBox1000">
          <div id="PB1000TLCorner"></div>
          <div id="PB1000TMBorder"></div>
          <div id="PB1000TRCorner"></div>
          <div id="PB1000MLBorder"></div>
          <div id="PB1000Containr">
            <div id="Pricing1000Title"></div>
            <div id="Pricing1000Price"></div>
            <div id="Pricing1000InfoContainer">
              <div id="Pricing1000Services"></div>
              <div id="Pricing1000Payments"></div>
            </div>
            <div id="Pricing1000SummaryContainer"></div>
          </div>
          <div id="PB1000MRBorder"></div>
          <div id="PB1000BLCorner"></div>
          <div id="PB1000BMBorder"></div>
          <div id="PB1000BRCorner"></div>
        </div>
      </div>
    </div>
    <div class="PricingBoxContainers">
      <div id="PricingBox1000Margin">
        <div id="PricingBox1000">
          <div id="PB1000TLCorner"></div>
          <div id="PB1000TMBorder"></div>
          <div id="PB1000TRCorner"></div>
          <div id="PB1000MLBorder"></div>
          <div id="PB1000Containr">
            <div id="Pricing1000Title"></div>
            <div id="Pricing1000Price"></div>
            <div id="Pricing1000InfoContainer">
              <div id="Pricing1000Services"></div>
              <div id="Pricing1000Payments"></div>
            </div>
            <div id="Pricing1000SummaryContainer"></div>
          </div>
          <div id="PB1000MRBorder"></div>
          <div id="PB1000BLCorner"></div>
          <div id="PB1000BMBorder"></div>
          <div id="PB1000BRCorner"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="PricingDisclaimer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla tempus semper. Nam ut gravida odio. Morbi feugiat iaculis nisl, tincidunt congue arcu sagittis id. Duis fermentum mauris ut justo malesuada auctor. Nullam aliquam sit amet ante sit
    amet rhoncus. Suspendisse varius ultricies facilisis. Ut auctor ligula pretium dapibus vestibulum. Sed ac libero auctor, consectetur sapien nec, laoreet lacus. Sed porta est nec massa luctus, eget mollis magna malesuada. Sed pharetra convallis turpis,
    vel eleifend orci lacinia non. Ut mi lacus, accumsan eget arcu porttitor, viverra pellentesque quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla tempus semper. Nam ut gravida odio. Morbi feugiat iaculis nisl, tincidunt congue
    arcu sagittis id. Duis fermentum mauris ut justo malesuada auctor. Nullam aliquam sit amet ante sit amet rhoncus. Suspendisse varius ultricies facilisis. Ut auctor ligula pretium dapibus vestibulum. Sed ac libero auctor, consectetur sapien nec, laoreet
    lacus. Sed porta est nec massa luctus, eget mollis magna malesuada. Sed pharetra convallis turpis, vel eleifend orci lacinia non. Ut mi lacus, accumsan eget arcu porttitor, viverra pellentesque quam.
  </div>
  <div id="PricingHeader2"></div>
</div>

它如何在一个浏览器上运行而在另一个浏览器上运行？ 如何让它在两种浏览器上运行？

Answer 1

删除if (...) { doA(); } else if (...) { doB(); doC(); } else if (...) { doC(); } else { doD(); } 上的display: table-cell;。