Html IE中的CSS显示表

我有以下代码和CSS。它在Chrome中工作良好，但在IE中不起作用。有没有办法让它在IE中也工作

CSS:

.table{宽度：100%；高度：1%；背景色：石灰；显示：表格；边框折叠：折叠；}
.row{显示：表行；}
.centercell{垂直对齐：顶部；显示：表格单元格；背景色：#0f0；}
.top{背景色：黄色；宽度：100%；高度：20px；z索引：1；位置：相对；}
.bottom{背景色：黄色；宽度：100%；高度：20px；z索引：1；位置：相对；}
.middle{背景色：粉红色；宽度：100%；高度：100%；边距：-20px 0px；位置：相对；填充：20px 0px；}
.rightcell{垂直对齐：顶部；背景颜色：#f00；显示：表格单元格；宽度：155px；背景图像：url（'img/bg1.gif'）；背景重复：重复-y}
.leftcell{垂直对齐：顶部；背景色：#f00；显示：表格单元格；宽度：171px；}

HTML:

右栏
中顶
中间
中底
右列

右列

右列

右列

右列

右列

右列

右列

---

IE7不支持

display:table

，您的代码在IE8、IE9和IE10中看起来很好。因此，您必须使用实际的

，或者，如果它是一个选项，则使用

float

s

恐怕没有别的办法了

---

编辑：显然这是为你的页面布局设计的。您不应该使用

或

显示：表格

。就让一些潜水艇浮起来吧，伙计

IE7及以下版本不支持

显示：table

，因此唯一的解决方法是实际使用table。IE8确实。。。这里有一个JSFiddle给大家（花了两秒钟制作）：@RobertKoritnik因此是“7及以下”@Andy:因为你已经更改了你的评论。原来它只说IE。。。因此我的IE8评论…；）哦，这并不像你想象的那么简单。。特别是，当您不想每次都修改css（填充）时，您需要在div中添加另一个换行元素。@mmcrae这是一个非常常见的问题。Flexbox现在也能帮上忙@ChuckLeButt Flexbox只有在您不必支持IE 8或9的情况下才是伟大的

<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>

<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>