3

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

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

在此处输入图像描述

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

在此处输入图像描述

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

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

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

4

3 回答 3

10

无需更改 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;
}
于 2013-07-23T10:56:28.260 回答
1

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

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

于 2013-12-11T19:01:40.003 回答
-1

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

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

编辑

经过一番激烈的辩论（见下面的评论），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/

于 2013-07-23T10:55:55.413 回答