top assoluto: 0 in basso: 0 non funziona all'interno di table-cell in IE11

Question

Partendo a precedenti interrogazioni miei, ho questo fiddle

Ha due colonne in cima a una colonna in piccole viste e 3 colonne di seguito in altre viste. Funziona come previsto. Tuttavia, per l'aspetto del design, volevo uno spazio tra i blocchi del contenuto. Per rimediare, ho creato un elemento posizionato in modo assoluto all'interno delle celle che sarebbe stato dimensionato di conseguenza per riempire lo spazio, ma lasciare uno spazio vuoto. Funziona perfettamente in Chrome, tuttavia IE11, desktop, app Windows 8 e Windows Phone non funzionano come previsto.

In IE11 i blocchi si espandono solo per adattarsi al contenuto (anche se i blocchi assoluti non contengono alcun contenuto ...) presumo che ciò sia dovuto al fatto che IE sta prendendo in considerazione il riempimento naturale della cella che il browser aggiunge per rendere celle della stessa altezza. Il kicker è: se assegni al blocco un'altezza impostata, e usi bottom:0 il blocco si attaccherà direttamente alla parte inferiore della cella.

Ecco il codice HTML violino:

<div class="table"> 
    <div class="cell"><div class="back"></div>One Line</div> 
    <div class="cell"><div class="back"></div>Two<br/>Lines</div> 
    <div class="cell"><div class="back"></div>More<br/>Than two<br/>Lines</div> 
</div> 

e CSS:

.table { 
    display: table; 
    table-layout: fixed; 
    border-collapse: collapse; 
    width: 100%; 
} 
.cell { 
    display: table-cell; 
    border: 1px solid red; 
    position:relative; 
    padding:0px 10px; 
} 
.back { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:10px; 
    right:10px; 
    background:#777; 
    z-index:-10; 
} 
.cell:first-child .back { 
    right:5px; 
} 
.cell:nth-child(2) .back { 
    left:5px; 
} 
@media (max-width: 768px) { 
    .cell:last-child { 
     display: table-caption; 
     caption-side: bottom; 
    } 
} 

@media (min-width:769px){ 
    .cell:last-child .back { 
     left:5px; 
    } 
    .cell:nth-child(2) .back { 
     right:5px; 
    } 
} 

Cosa hack CSS/trucchi potrei usare per rendere il comportamento di IE imitare quello di Chrome? Preferirei non usare javascript per risolvere questo problema.

Answer 1

Puoi provare a utilizzare in questo modo

.back{min-height: 56px;}