Question

我有一个问题，在标题中描述。我在这张桌子的td里面有一张桌子。我想将这个div相对于表行定位，所以我将tr位置设置为relative，将div位置设置为absolute。它在Firefox中运行良好，但在IE中它对我来说意外。有一个代码：

<div class="container">
<div class="panel"></div>
<table>
    <tbody>
        <tr>
            <td>a</td>
            <td>s</td>
            <td><div class="problem-div">i'm here</div></td>
        </tr>
    </tbody>
</table>

table {
    border: 1px solid;
    table-layout: fixed;
    width: 100%
}

tr {
    position: relative
}

.panel {
    height: 50px;
    background-color: red
}
.problem-div {
    position: absolute;
    top: 0;
    left: 0
}

有小提琴 http://jsfiddle.net/L7nczrsp/5/ 请帮助我理解我做错了什么。

UPDATE1 感谢@James，我们现在知道表元素的位置未定义http://w3.org/TR/CSS21/visuren.html#propdef-position

但是，我们可以将td位置设置为relative，而不是将此样式设置为tr。它工作正常。但它仍与w3冲突。

但感谢@ShabanKhan的想法，我们可以将相对定位div放入td并将我们的问题div放入此div中。似乎工作。有更新的小提琴http://jsfiddle.net/meatwas/akkLxjpp/1/

Answer 1

定位不适用于表属性尝试添加div以使其相对位置。

Answer 2

如果您将position: relative添加到table，那么它在Chrome，FF和Safari中效果很好

jsfiddle example有你的想法。

IE绝对定位<div>内部相对于position：relative </div>

2 个答案: