在TD中使用位置相对/绝对值？

Question

我有以下代码:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

这根本不起作用.出于某种原因,在TD上没有读取位置:相对命令,并且通知DIV被放置在我页面底部的内容容器之外.我试图把TD的所有内容都放到DIV中,例如:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

但是,这会产生新问题.由于表格单元格内容的高度是可变的,因此通知DIV并不总是位于单元格的底部.如果表格单元格超出60px标记,但其他单元格都没有,那么在其他单元格中,通知DIV将向下移动60px,而不是在底部.

Answer 1

这是因为根据CSS 2.1,position: relative对表元素的影响是未定义的.说明这一点,position: relative对Chrome 13有所期望的效果,但在Firefox 4上却没有.你的解决方案就是div在你的内容周围添加一个而不是在内容position: relative上.下面说明了(1)关于商品的结果,(2)关于a (不好),最后(3)关于a (好的).divtdposition: relativedivtddivtd

作为参考,这是HTML源代码.

Answer 2

这个技巧也很合适,但在这种情况下,对齐属性(中间,底部等)将不起作用.

<td style="display: block; position: relative;">
</td>