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

Question

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

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

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

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

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

P.S。我使用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 for wrapper：

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

Answer 2

而不是使用left:10px;使用left:auto;

这是解决方法，而不是真正的解决方案。

Answer 3

你应该给出最高ul位置相对位置，否则它确实会使用窗口本身（或者那个身体）作为定位偏移。

检查出来：http://jsfiddle.net/gpsgv/13/

修改

经过激烈的辩论（见下面的评论），似乎firefox在处理类似表格的块时更加严格。除了在包含第二级列表的列表项中添加包装器div之外，我找不到这个的跨浏览器解决方案。当我创建菜单时，我总是使用浮动技术。在调整列表项的大小方面你会有更多的工作（因为表填充空间本身）。基本上你会这样做：

HTML：

<ul class="nav">
    <li>
        First level 1
        <ul>
            <li>Second level 1</li>
            <li>Second level 2</li>
        </ul>
    </li>
    <li>First level 2</li>
    <li>First level 3</li>
    <li>First level 4</li>
</ul>

的CSS：

ul.nav { 
    float: left; /* Needed as a kind of clearfix. Other clearfix techniques also possible */
}

/* be sure to add the > to prevent from second level li's to float */
ul.nav > li {
    float: left;
    position: relative;
}

ul.nav > li > ul {
    position: absolute;
    top: 30px;
    left: 10px;
}

要创建与OP想要的结果相同的结果，请查看这个小提琴（在chrome和FF中检查，没有IE，但应该是好的）：http://jsfiddle.net/gpsgv/17/