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

Question

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

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

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

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

我的问题是，有什么解决方案可以让它在 Firefox 中正确显示，而无需更改 HTML？

附：我使用 display: table-cell 是因为菜单必须沿 100% 容器宽度均匀分布。

Answer 1

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

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

Answer 2

你也应该给最上面的ul一个相对位置，否则它确实会使用窗口本身（或主体）作为定位偏移量。

查看：http://jsfiddle.net/gpsgv/13/

编辑

经过一些激烈的辩论（见下面的 cmets），Firefox 似乎在处理类似表格的块方面更加严格。除了在包含二级列表的列表项中添加一个 wrapper-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/

Answer 3

不改变 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;
}