表格单元格中的css绝对位置:奇怪的Firefox显示

Question

我有一个简单的水平菜单,有两个级别.此菜单延伸至包装纸的100%宽度.这是小提琴:http://jsfiddle.net/gpsgv/

如果您在除Firefox之外的任何浏览器中运行此小提琴,它将按预期显示以下内容:

如果你在Firefox中运行这个小提琴,它会显示以下内容:

查看代码,第二级列表绝对位于第一级项目(具有display: relative样式)内.因此,将left: 10px样式设置为第二级列表应该将其定位为距离其相对定位的祖先的左侧10px.同样的top: 30px.但是在Firefox中,它将它定位在左侧和顶部我不知道是什么,也许是身体？

我的问题是,是否有任何解决方案可以在Firefox中正确显示,而无需更改HTML？

PS我用,display: table-cell因为菜单必须沿100%容器宽度均匀分布.

Answer 1

无需更改html - 无论如何.

position:absolute部队display: block,请阅读:http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

解决方案:将菜单项内容包装到其他元素:

<li> 
    <div class="menu-item-container">
        <a href="#">Item</a>

        <ul>
            <li>
                <a href="#">First</a>
            </li>
            <li>
                <a href="#">Second</a>
            </li>
        </ul>
    </div>
</li>

和包装的CSS:

.menu-item-container {
    position: relative;
}