Question

我遇到了位置问题：相对于FireFox中的th元素。在Chrome和IE中，th元素是绝对定位元素的有效偏移父元素。

<div class="relative">
    <p>fill some spacing</p>
    <table>
        <tr>
            <th>
                Hello?
                <div id="absolute">Is it me you're looking for</div>
            </th>
        </tr>
    </table>
</div>

.relative {
    position:relative;
    border:1px solid green;
}

th {
    position:relative;
    border:1px solid red;
}

#absolute {
    position:absolute;
    top: 0;
    left: 100px;
    width: 200px;
    border: 1px solid blue;
}

http://jsfiddle.net/ntQqL/2/

在FireFox中，#absolute元素位于.relative的最顶部，在Chrome和IE中，它位于th的顶部，就像我预期的那样。

这是一个众所周知的差异，还是我做错了什么？

Answer 1

这可能与处理display和position属性的方式有关...

如果您在display:block，it will work上加th。

Christiaan回答also works。

但我想解决此问题的最佳方法是put a relative positionned div inside your th。

Answer 2

当您将位置：亲戚放在table而不是th时似乎有效。也许这可以在你的情况下用作解决方法？

FireFox：TH作为绝对位置框的偏移父级？

2 个答案: