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

Posted 2023-03-06

【中文标题】表格单元格内的css绝对位置：奇怪的Firefox显示

【英文标题】：css absolute position inside table-cell: strange Firefox display

【发布时间】：2013-07-22 09:29:36

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

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

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

【参考方案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/

【讨论】：

所有子项都对齐到第一个块的左侧

ehrm...我亲爱的@maximkou，你见过小提琴吗？它就像一个魅力（我已经在 chrome 和 firefox 中检查过它）。如果没有，请告诉我您看到了什么以及您使用的浏览器。

我正在检查 Firefox 22.0，在 Chrome 中一切正常，是的。操作系统视窗 7

我也是……以及我问题的另一部分；你到底看到了什么？因为我的 Firefox 完全按照 OP 的要求呈现它......

我现在不知道。我看到了我看到的。

【参考方案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;

【讨论】：

你怎么知道不改HTML就不能解决？根据 CSS 规则，它应该可以工作，（并且它正在工作，FF 除外）

@camcam，位置：绝对力显示：块，读取w3.org/TR/CSS2/visuren.html#dis-pos-flo

唯一绝对定位的元素是二级列表。因此，作为块显示，它应该绝对定位在第一级<li> 内。相反，它绝对定位在 body 元素内。

@camcam，第一级“li”显示为“table-cell”，而不是“block”！这显然在您的代码中说明。相对于body放置是对的，请仔细阅读文档。

但问题不在于一级li，而在于二级ul。问题是，为什么 FF 看不到具有相对定位的正确祖先。