FireFox：TH作为绝对定位框的偏移父级？答案

【问题标题】：FireFox: TH as offset parent for absolute positioned box?FireFox：TH作为绝对定位框的偏移父级？
【发布时间】：2013-05-16 13:23:45
【问题描述】：

我在 FireFox 中的 th 元素上遇到了 position:relative 的问题。在 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 的顶部，就像我预期的那样。

这是众所周知的区别，还是我做错了什么？

【问题讨论】：

标签： css firefox css-position

【解决方案1】：

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

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

克里斯蒂安回答also works。

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

【讨论】：

我尝试了最后一种方法并且有效。如果默认显示是表格单元格，我猜 display:block 也可以，但它不是真正的块，更多的是内联块...

【解决方案2】：

当您将 position:relative 放在 table 而不是 th 上时，它似乎确实有效。也许这可以用作您的情况的解决方法？

【讨论】：

不，因为第二个 th 会向右有一些未知的偏移量，我也想保持...