1

我对放置在表格单元格内的 div 有疑问。单元格具有固定高度,并且 div 相对于 height:100% 定位。

jsfiddle 示例

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 中以同样的方式工作?

4

2 回答 2

2

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

position: relative并没有多大意义,而且border-fixdiv 似乎是不必要的 - 也导致了问题。表格(以及具有类似元素display: table-cell的元素)在涉及到时非常灵活height- 简单的块元素可能不像在这种情况下那样。

还有很多多余的 CSS,请参阅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%;
}
于 2012-12-20T22:25:23.717 回答
-1

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

于 2012-12-20T22:13:38.753 回答