相对div与父表单元格重叠

Question

我有一个div放在表格单元格内的问题。 单元具有固定高度，div相对于高度定位：100％。

jsfiddle example

td {
    height:80px;
    width: 80px;
}
.cell_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position:relative;
}

当我更改div的内容并且div高度变得大于单元格高度时，会出现问题。 IE和FF的行为如下：

以下图片说明了Chrome的行为：

Chrome的行为正是我的需要，我怎样才能让它在IE和Firefox中以同样的方式运作？

Answer 1

我删除了不必要的标记和CSS，现在它似乎工作正常。

position: relative没有多大意义，border-fix div似乎没必要 - 而且也引起了问题。对于display: table-cell，表（以及具有height等的元素）非常灵活 - 简单的块元素可能不是，就像在这种情况下一样。

还有很多冗余的CSS，请参阅the Fiddle。在Chrome，FF，IE9中测试过。

所以这就是标记：

<td class="border">
    <div class="cell_wrapper">
        <div class="cell_text">
            line-1
        </div>
    </div>
</td>

相关的CSS：

#mytable td {
    height:80px;
    width: 80px;
    text-align: center;
}

.cell_wrapper {
    display: table;
    height: 100%;
    width: 100%;
}

.cell_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

Answer 2

Firefox为控制细胞行为提供了一些可能性，但如果你必须支持IE7，那你就不走运了。 display: table-cell;在IE7或更早版本中不起作用。