我有以下代码和CSS。在Chrome中它运行良好,但在IE中却不行。有没有办法让它在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>
display: table
,所以唯一的解决方法是实际上使用表格。http://caniuse.com/css-table - Andy