网站在Chrome上正常显示，但在Firefox中没有

时间：2016-01-20 08:39:21

标签： css html5 css3 firefox flexbox

我有这个问题，我是在Chrome中设计的，并没有看过Firefox。我使用过flexboxgrid库。

Firefox：

enter image description here

铬：

enter image description here 

        <div class="row result-table font-size-13">

      <table class="col-xs remove-pad-ver">

        <tr class="row middle-xs center-xs result-table-header ">
          <th class="col-custom-3p full-100 index-table-header">

            <div class="row row-fit-index-2 middle-xs center-xs table-index-2">

              <div class="col-xs-2 full-100  ">
                <div class="row full-100 start-xs">

                  <div class="col-xs-9 table-index-2 table-index-nonumber remove-pad-ver full-100">
                    <div class="row full-100 middle-xs ">

                      <div class="col-xs-5 remove-pad-ver">

                      </div>
                      <div class="col-xs-2 remove-pad-ver">
                        #
                      </div>
                      <div class="col-xs-5 remove-pad-ver">

                      </div>
                    </div>
                  </div>
                  <div class="col-xs-3">

                  </div>
                </div>

              </div>

              <div class="col-xs-4 remove-pad-ver" style="margin-top: 0.6em;">
                RAM 1

              </div>

              <div class="col-xs-2 remove-pad-ver full-100">
                <div class="row full-100 middle-xs">
                  <div class="col-xs-4 remove-pad-ver">
                  </div>
                  <div class="col-xs-4 remove-pad-ver" style="height:60%;">


                  </div>
                  <div class="col-xs-4 remove-pad-ver">
                  </div>
                </div>

              </div>
              <div class="col-xs-4 remove-pad-ver" style="margin-top: 0.6em;">
                RAM 2

              </div>

            </div>
          </th>
          <th class="col-custom-3p market-table remove-pad">
            <div class="row middle-xs market-title ">
              <div class="col-xs">
                MATCH RESULT
              </div>
            </div>
            <div class="row market middle-xs market-type font-size-11">
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs">
                    RAM1
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs">
                    DRAW
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100 ">
                <div class="row middle-xs full-100 ">
                  <div class="col-xs">
                    RAM2
                  </div>
                </div>
              </div>
            </div>
          </th>
          <th class="col-custom-3p market-table remove-pad">
            <div class="row middle-xs market-title">
              <div class="col-xs">
                NUMBER OF HITS
              </div>
            </div>
            <div class="row market middle-xs market-type font-size-11">
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs">
                    1-10
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs">
                    11-20
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs">
                    21-30
                  </div>
                </div>
              </div>
            </div>
          </th>
          <th class="col-xs-2 market-table remove-pad">
            <div class="row middle-xs market-title">
              <div class="col-xs">
                HIT/NO HIT
              </div>
            </div>
            <div class="row market middle-xs market-type font-size-11">
              <div class="col-xs-6 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs">
                    HIT
                  </div>
                </div>
              </div>
              <div class="col-xs-6 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    NO HIT
                  </div>
                </div>
              </div>

            </div>
          </th>
        </tr>
        <tr class="row middle-xs center-xs odd-row">
          <td class="col-custom-3p full-100 col-custom-index-name">

            <div class="row row-fit-index-2 middle-xs center-xs">

              <div class="col-xs-2 full-100 ">
                <div class="row full-100 start-xs">

                  <div class="col-xs-9 table-index remove-pad-ver full-100">
                    <div class="row full-100 middle-xs center-xs">

                      <div class="col-xs-4 remove-pad-ver">
                        1.
                      </div>
                    </div>
                  </div>

                </div>

              </div>

              <div class="col-xs-name-ram remove-pad-ver">
                RAM1_NAME
                <span class="yellow font-size-14">(MUNSHIN)</span>
              </div>

              <div class="col-xs-1and5 remove-pad-ver full-100">
                <div class="row full-100 middle-xs">
                  <div class="col-xs-4 remove-pad-ver">
                  </div>
                  <div class="col-xs-5 remove-pad-ver table-index" style="height:60%;">
                    <div class="row full-100">
                      <div class="col-xs-5 remove-pad-ver">

                      </div>
                      <div class="col-xs-2 remove-pad-ver full-100">
                        <div class="row middle-xs center-xs full-100">
                          <div class="col-xs remove-pad-ver">
                            VS
                          </div>
                        </div>

                      </div>
                      <div class="col-xs-5 remove-pad-ver">

                      </div>
                    </div>

                  </div>
                  <div class="col-xs-2 remove-pad-ver">
                  </div>
                </div>

              </div>
              <div class="col-xs-name-ram remove-pad-ver">
                RAM2_NAME
                <span class="yellow font-size-14">(MUNSHIN)</span>
              </div>

            </div>
          </td>
          <td class="col-custom-3p full-100">

            <div class="row odd middle-xs full-100">
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td class="col-custom-3p full-100">

            <div class="row odd font-size-7 middle-xs full-100">
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
              <div class="col-xs-4 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td class="col-xs-2 full-100 ">

            <div class="row odd font-size-7 middle-xs full-100 last-div">
              <div class="col-xs-6 full-100">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>
              <div class="col-xs-6 full-100 last-item">
                <div class="row middle-xs full-100">
                  <div class="col-xs remove-pad-ver">
                    99.99
                  </div>
                </div>
              </div>

            </div>
          </td>
        </tr>

其余代码更像其他代码。

.full-100 {
  position: relative;
  height: 100% !important;
}
table {
  position: relative;
  height: 100%;
   width: 100%;
   color: white;
 }
 .result-table {
   margin-top: 3%;
   position: relative;
   height: 100%;
 }
 .result-table-header {
   position: relative;
   height: 12%;
   color: #FFFFFF;
   background: #FFFFFF;
   -webkit-box-shadow: 0 6px 0 1px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0 6px 0 1px rgba(0, 0, 0, 0.75);
   box-shadow: 0 6px 0 1px rgba(0, 0, 0, 0.75);
   font-family: "Montserrat SemiBold";
 }
 .index-table {
   -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
 }
 .index-table-header {
   font-weight: normal;
    -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   background: none !important;
   -webkit-box-shadow: 0 8px 2px 0 rgba(0,0,0,0.75);
   -moz-box-shadow: 0 8px 2px 0 rgba(0,0,0,0.75);
   box-shadow: 0 8px 2px 0 rgba(0,0,0,0.75);
 }
 .col-custom {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   -webkit-box-flex: 0;
   flex: 0 0 auto;
   padding-right: 1rem;
   padding-left: 1rem;
 }
 .col-custom-3p {
   .col-custom;
   flex-basis: (100/12)*10/3% !important;
   max-width: (100/12)*10/3%;
   display: inline-block;
 }
 tr {
   border-bottom: 2px solid black;
   border-top: 1px solid black;
   padding: 0;
   border-radius: 5px;
   max-width: 100%;
   background: black;
   &:first-child {
     border-top: 0;
     background: rgba(152,3,4,1);
     background: -moz-linear-gradient(top, rgba(152,3,4,1) 0%, rgba(127,3,3,1)      51%, rgba(91,2,4,1) 52%, rgba(77,2,2,1) 100%);
     background: -webkit-gradient(left top, left bottom, color-stop(0%,           rgba(152,3,4,1)), color-stop(51%, rgba(127,3,3,1)), color-          stop(52%, rgba(91,2,4,1)), color-stop(100%, rgba(77,2,2,1)));
     background: -webkit-linear-gradient(top, rgba(152,3,4,1) 0%,                rgba(127,3,3,1) 51%, rgba(91,2,4,1) 52%, rgba(77,2,2,1) 100%);
     background: -o-linear-gradient(top, rgba(152,3,4,1) 0%, rgba(127,3,3,1)      51%, rgba(91,2,4,1) 52%, rgba(77,2,2,1) 100%);
     background: -ms-linear-gradient(top, rgba(152,3,4,1) 0%, rgba(127,3,3,1)      51%, rgba(91,2,4,1) 52%, rgba(77,2,2,1) 100%);
     background: linear-gradient(to bottom, rgba(152,3,4,1) 0%, rgba(127,3,3,1)      51%, rgba(91,2,4,1) 52%, rgba(77,2,2,1) 100%);
     filter:progid:DXImageTransform.Microsoft.gradient(                     startColorstr='#980304', endColorstr='#4d0202', GradientType=0 );
        }
   &:last-child {
     border-bottom: 0;
   }
 }
 td {
   padding-top: 0.1vw;
   padding-bottom: 0.1vw;
 }
 td,
 th {
   border-left: 4px solid black;
   background: #414141;
   &:first-child {
     border-left: 0;
     background: #E30005;
     padding-left: 1.06rem;
       }
     }

我认为这都是影响html的css。谢谢！

0 个答案:

没有答案
相关问题
最新问题