在IE中使用CSS display table

Question

在IE中使用CSS display table

3

我有以下代码和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>

- user1784025

1

IE7及以下版本不支持display: table，所以唯一的解决方法是实际上使用表格。http://caniuse.com/css-table - Andy

IE8不能正确显示display属性的table-cell值。详细信息请参见http://www.quirksmode.org/css/display.html。 - Robert Koritnik

1

这里有一个 JSFiddle 给大家使用（只用了两秒钟就做好了）：http://jsfiddle.net/U9eVA/ - Chuck Le Butt

2

@RobertKoritnik 因此，“7及以下” - Andy

@DjangoReinhardt 是的，这是我的页面布局。我只想要三个DIV的高度都相同（高度取决于DIV中的文本）。第一个DIV具有固定宽度（有菜单），第三个也具有固定宽度（有pol和cart），第二个DIV占用所有可用宽度（三个DIV的总宽度为100％）。在第二个DIV中，我想要有另外三个DIV，一个在顶部，一个在底部，一个占用所有可用空间。 - user1784025

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chuck Le Butt · Accepted Answer

IE7不支持display:table，你的代码在IE8、IE9和IE10中看起来很好。所以你要么必须使用一个真正的<table>，要么如果可以选择的话，使用float代替。

恐怕没有其他办法。

编辑：显然这是关于您的页面布局。你不应该使用<table>或display:table。只需浮动一些DIV元素即可！