为什么这个flex表适用于chrome，但不适用于IE 11？

时间：2017-02-13 13:21:49

标签： html css flexbox internet-explorer-11

我试图在不使用javascript的情况下使用滚动和固定页眉/页脚来制作灵活的网格，但不知何故灵活项目在IE上无法正常工作。

这里是小提琴： https://jsfiddle.net/m6oqw76e/5/

基本上我正在做的是设置宽度为100％的所有内容并使用此结构：

.mGrid > thead > tr.hdr,
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
    display: flex;
}
.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
    min-width: 0;
    word-wrap: break-word;
    /*flex-grow: 100;
    flex-shrink: 0;
    flex-basis: 0px;*/
    flex: 100 0 0px;
}

我知道IE有很多关于flex的错误，但是我想知道是否有任何解决方法可以使它工作。

＆＃13;
＆＃13; 
.mGrid {  border-collapse: collapse;  background-color: gainsboro;  }
.mGrid > thead > tr.hdr > th, .mGrid > tbody > tr.nrm > td, .mGrid > tbody > tr.alt > td {  border: 1px solid white;  }


/*======================================================================= basic table structure */
.mGrid {
  width: 100%;
}
.mGrid > thead,
.mGrid > tbody,
.mGrid > tfoot {
  display: block;
  width: 100%;
}
.mGrid > tbody {
  height: 100px;
  overflow-y: scroll;
}
.mGrid > thead > tr.hdr {
  width: calc(100% - 17px);
}
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
  width: 100%;
}
/*======================================================================= flex not working */
.mGrid > thead > tr.hdr,
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
  display: flex;
}
.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
  min-width: 0;
  word-wrap: break-word;
  /*flex-grow: 100;
  flex-shrink: 0;
  flex-basis: 0px;*/
  flex: 100 0 0px;
}
＆＃13; 
<table class="mGrid">
  <thead>
    <tr class="hdr">
      <th><a href="http://google.com">Nº Despesa</a></th>
      <th><a href="http://google.com">Consultor</a></th>
      <th><a href="http://google.com">Setor</a></th>
      <th><a href="http://google.com">Empresa</a></th>
      <th><a href="http://google.com">Motivo</a></th>
      <th><a href="http://google.com">Data</a></th>
      <th><a href="http://google.com">Hotel</a></th>
      <th><a href="http://google.com">Refeição</a></th>
      <th><a href="http://google.com">Veículo</a></th>
      <th><a href="http://google.com">Taxi</a></th>
      <th><a href="http://google.com">Outros</a></th>
      <th>Vlr Total</th>
      <th>Comprovantes OK</th>
      <th>Aprovado</th>
      <th>Status Visita</th>
    </tr>
  </thead>
  <tbody>
    <tr class="nrm">
      <td><span>00392-05-01</span></td>
      <td><span>Names na</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>Empres</span></td>
      <td><span>Serviço</span></td>
      <td><span>06-03-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 150,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 230,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00392-03-01</span></td>
      <td><span>Names Names Names</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>EMPR</span></td>
      <td><span>Serviço</span></td>
      <td><span>31-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 180,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="nrm">
      <td><span>00392-02-01</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>Empres</span></td>
      <td><span>Serviço</span></td>
      <td><span>31-01-2017</span></td>
      <td><span>Sim</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 180,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00392-01-02</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>EMPR</span></td>
      <td><span>Relacionamentos</span></td>
      <td><span>31-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 30,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 130,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="nrm">
      <td><span>00392-01-01</span></td>
      <td><span>Names na Names</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>EMPR</span></td>
      <td><span>Relacionamentos</span></td>
      <td><span>30-01-2017</span></td>
      <td><span>Sim</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 180,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00388-01-01</span></td>
      <td><span>Names na Namesnam</span></td>
      <td><span>Requisitos</span></td>
      <td><span>Empres</span></td>
      <td><span>Serviço</span></td>
      <td><span>01-02-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 246,60</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 246,60</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="nrm">
      <td><span>00387-02-01</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Middleware</span></td>
      <td><span>Empresa Empresaempr EMPR-ESA</span></td>
      <td><span>Serviço</span></td>
      <td><span>26-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 266,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 266,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00387-01-01</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Middleware</span></td>
      <td><span>Empres</span></td>
      <td><span>Vendas</span></td>
      <td><span>25-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 185,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 185,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="pgr">
      <td colspan="16">
        <table>
          <tbody>
            <tr>
              <td><span>1</span></td>
              <td><a href="http://google.com">2</a></td>
              <td><a href="http://google.com">3</a></td>
              <td><a href="http://google.com">4</a></td>
              <td><a href="http://google.com">5</a></td>
              <td><a href="http://google.com">6</a></td>
              <td><a href="http://google.com">7</a></td>
              <td><a href="http://google.com">8</a></td>
              <td><a href="http://google.com">9</a></td>
              <td><a href="http://google.com">10</a></td>
              <td><a href="http://google.com">...</a></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tfoot>
</table>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

为IE使用前缀 https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx 

display: -ms-flexbox;
-ms-flex-align: start;

等。

.mGrid {  
  border-collapse: collapse;  
  background-color: gainsboro;  
 }
 
.mGrid > thead > tr.hdr > th, 
.mGrid > tbody > tr.nrm > td, 
.mGrid > tbody > tr.alt > td {  
  border: 1px solid white;  
 }


/*======================================================================= basic table structure */
.mGrid {
  width: 100%;
}
.mGrid > thead,
.mGrid > tbody,
.mGrid > tfoot {
  display: block;
  width: 100%;
}
.mGrid > tbody {
  height: 100px;
  overflow-y: scroll;
}
.mGrid > thead > tr.hdr {
  width: calc(100% - 17px);
}
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
  width: 100%;
}
/*======================================================================= flex not working */
.mGrid > thead > tr.hdr,
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
  display: flex;
}
.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
  min-width: 0;
  word-wrap: break-word;
  /*flex-grow: 100;
  flex-shrink: 0;
  flex-basis: 0px;*/
  flex: 100 0 0px;
  display: -ms-flexbox;
-ms-flex-align: start;
}
<table class="mGrid">
  <thead>
    <tr class="hdr">
      <th><a href="http://google.com">Nº Despesa</a></th>
      <th><a href="http://google.com">Consultor</a></th>
      <th><a href="http://google.com">Setor</a></th>
      <th><a href="http://google.com">Empresa</a></th>
      <th><a href="http://google.com">Motivo</a></th>
      <th><a href="http://google.com">Data</a></th>
      <th><a href="http://google.com">Hotel</a></th>
      <th><a href="http://google.com">Refeição</a></th>
      <th><a href="http://google.com">Veículo</a></th>
      <th><a href="http://google.com">Taxi</a></th>
      <th><a href="http://google.com">Outros</a></th>
      <th>Vlr Total</th>
      <th>Comprovantes OK</th>
      <th>Aprovado</th>
      <th>Status Visita</th>
    </tr>
  </thead>
  <tbody>
    <tr class="nrm">
      <td><span>00392-05-01</span></td>
      <td><span>Names na</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>Empres</span></td>
      <td><span>Serviço</span></td>
      <td><span>06-03-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 150,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 230,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00392-03-01</span></td>
      <td><span>Names Names Names</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>EMPR</span></td>
      <td><span>Serviço</span></td>
      <td><span>31-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 180,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="nrm">
      <td><span>00392-02-01</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>Empres</span></td>
      <td><span>Serviço</span></td>
      <td><span>31-01-2017</span></td>
      <td><span>Sim</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 180,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00392-01-02</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>EMPR</span></td>
      <td><span>Relacionamentos</span></td>
      <td><span>31-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 30,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 130,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="nrm">
      <td><span>00392-01-01</span></td>
      <td><span>Names na Names</span></td>
      <td><span>Plantão 24x7</span></td>
      <td><span>EMPR</span></td>
      <td><span>Relacionamentos</span></td>
      <td><span>30-01-2017</span></td>
      <td><span>Sim</span></td>
      <td><span>R$ 80,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 100,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 180,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00388-01-01</span></td>
      <td><span>Names na Namesnam</span></td>
      <td><span>Requisitos</span></td>
      <td><span>Empres</span></td>
      <td><span>Serviço</span></td>
      <td><span>01-02-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 246,60</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 246,60</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="nrm">
      <td><span>00387-02-01</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Middleware</span></td>
      <td><span>Empresa Empresaempr EMPR-ESA</span></td>
      <td><span>Serviço</span></td>
      <td><span>26-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 266,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 266,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
    <tr class="alt">
      <td><span>00387-01-01</span></td>
      <td><span>Names na Names Namesnam</span></td>
      <td><span>Middleware</span></td>
      <td><span>Empres</span></td>
      <td><span>Vendas</span></td>
      <td><span>25-01-2017</span></td>
      <td><span>Não</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 185,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 0,00</span></td>
      <td><span>R$ 185,00</span></td>
      <td><span>Sim</span></td>
      <td><span>Sim</span></td>
      <td><span>Liquidado</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="pgr">
      <td colspan="16">
        <table>
          <tbody>
            <tr>
              <td><span>1</span></td>
              <td><a href="http://google.com">2</a></td>
              <td><a href="http://google.com">3</a></td>
              <td><a href="http://google.com">4</a></td>
              <td><a href="http://google.com">5</a></td>
              <td><a href="http://google.com">6</a></td>
              <td><a href="http://google.com">7</a></td>
              <td><a href="http://google.com">8</a></td>
              <td><a href="http://google.com">9</a></td>
              <td><a href="http://google.com">10</a></td>
              <td><a href="http://google.com">...</a></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tfoot>
</table>

答案 1 :(得分：1)

更新此css，您需要覆盖th的{​​{1}}的默认显示属性，td display:table-cell。

display:flex;

.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
  min-width: 0;
  word-wrap: break-word;
  flex:1 1 110px; /* Updated*/
  display:flex; /* Added to override default display property*/
}

.mGrid {  border-collapse: collapse;  background-color: gainsboro;  }
.mGrid > thead > tr.hdr > th, .mGrid > tbody > tr.nrm > td, .mGrid > tbody > tr.alt > td {  border: 1px solid white;  }


/*======================================================================= basic table structure */
.mGrid {
  width: 100%;
}
.mGrid > thead,
.mGrid > tbody,
.mGrid > tfoot {
  display: block;
  width: 100%;
}
.mGrid > tbody {
  height: 100px;
  overflow-y: scroll;
}
.mGrid > thead > tr.hdr {
  width: calc(100% - 17px);
}
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
  width: 100%;
}
/*======================================================================= flex not working */
.mGrid > thead > tr.hdr,
.mGrid > tbody > tr.nrm,
.mGrid > tbody > tr.alt {
  display: flex;
}
.mGrid > thead > tr.hdr > th,
.mGrid > tbody > tr.nrm > td,
.mGrid > tbody > tr.alt > td {
  min-width: 0;
  word-wrap: break-word;
  flex:1 1 110px;
  display:flex;
}

相关问题
最新问题