CSS tableau d'affichage sous IE

J'ai le code suivant et CSS. Il fonctionne bien dans Chrome, mais pas sous IE. Est-il possible de le faire fonctionner sous IE?

CSS:

<style type="text/css">
        .table {width:100%;height: 1%;background-color: lime;display: table;border-collapse: collapse;}
        .row {display: table-row;}
        .centercell {vertical-align: top;display: table-cell;background-color: #0f0;}
        .top{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
        .bottom{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
        .middle{background-color:pink;width:100%;height: 100%;margin: -20px 0px;position: relative;padding: 20px 0px;}
        .rightcell {vertical-align: top;background-color: #f00;display: table-cell;width:155px;background-image: url('img/bg1.gif');background-repeat:repeat-y}
        .leftcell {vertical-align: top;background-color: #f00;display: table-cell;width:171px;}
    </style>

HTML:

<div class="table">
<div class="row">
    <div class="leftcell">
        right column
    </div>
    <div class="centercell">
        <div class="top">center top</div>
        <div class="middle">center middle</div>
        <div class="bottom">center bottom</div>
    </div>
    <div class="rightcell">
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
    </div>
</div>

IE7 et ci-dessous ne prennent pas en charge display: table, donc la seule solution consiste en fait à l'aide d'un tableau. caniuse.com/css-table
IE8 n'... quirksmode.org/css/display.html
Voici un JSFiddle pour tout le monde (j'ai pris deux secondes pour le faire): jsfiddle.net/U9eVA
Par conséquent, les "7 et ci-dessous"
Depuis que vous avez changé votre commentaire. A l'origine, il a seulement dit IE... d'Où mon IE8 commentaire... 😉

OriginalL'auteur user1784025 | 2012-11-14

  1. 7

    IE7 ne prend pas en charge display:table, votre code a l'air bien dans IE8, IE9 et IE10. Donc, soit vous devez utiliser un réel <table> ou, si c'est une option, utilisez floats à la place.

    Pas d'autre moyen, je le crains.

    Edit: Apparemment, c'est pour votre mise en page. Vous ne devriez pas être à l'aide de <table> ou display:table. Juste flotter quelques DIVs homme!

    Oh c'est pas si simple qu'on pourrait le penser ... stackoverflow.com/questions/1205159/... .. esp. lorsque vous ne voulez pas avoir à modifier le css (rembourrage)chaque fois que vous avez besoin pour ajouter une autre ligne de rupture de l'élément dans votre div..
    C'est un problème très commun. Flexbox peut aider il y a ces jours-ci, trop. caniuse.com/#feat=flexbox
    Flexbox est grand que si vous n'avez pas à appuyer IE 8 ou 9

    OriginalL'auteur Chuck Le Butt