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 回答