Firefox中的相对位置[重复]

Posted 2023-03-06

【中文标题】Firefox中的相对位置[重复]

【英文标题】：position relative in firefox [duplicate]

【发布时间】：2011-11-29 13:39:30

【问题描述】：

可能重复：Does Firefox support position: relative on table elements?

这是一个示例：全角菜单作为表格，ul-s 作为下拉菜单。 http://cssdesk.com/dW7WS

在 ie 和 opera 中运行良好，但在 Firefox 下拉列表中 uls 在整个屏幕上拉伸！

有什么帮助吗？

【问题讨论】：

全角菜单作为表格 - 第一个错误。

在 IE9 中根本没有为我显示菜单。

【参考方案1】：

position: relative 不适用于表格单元格（<td> 或 display: table-cell）。

来自规范：http://www.w3.org/TR/CSS21/visuren.html#propdef-position

'position:relative' 对 table-row-group 的影响， 表头组、表尾组、表行、表列组、 table-column、table-cell 和 table-caption 元素未定义。

所以，Firefox 没有做错任何事，尽管我确实希望它能够复制其他浏览器并使其正常工作。

要完成这项工作，您需要在每个 td 中添加一个包装器 div（并调整您的 CSS 选择器）：

<table id="mainmenu">
    <tr>
        <td>
            <div style="position: relative;">
                <a href="#">..</a>
                <ul>
                    ..
                </ul>
            </div>
        </td>

        ..
    </tr>
</table>

【讨论】：

谢谢你，三十点 - 你的回答是最有帮助的。你能告诉我，该容器 div 必须应用什么样式？

不客气。您应该将#mainmenu td 的内容移至#mainmenu td > div。您还应该将#mainmenu td:hover > ul 更改为#mainmenu td:hover > div > ul。我在这里只做了第一个：cssdesk.com/hmWSd。反正就是这样。

再次感谢三十点！完美！

bugzilla.mozilla.org/show_bug.cgi?id=63895

【参考方案2】：

就像@Jared Farrish 所说，使用表格进行布局是不好的做法，也是这里的问题。

#mainmenu ul li 
    width: 100%;

导致 li 元素显示 100% 的屏幕。我建议您将菜单包装在容器 div 中，这里绝对不需要表格，您应该将菜单放在无序列表中，例如：-

<ul>
   <li class="parent_node"> Menu Header 1
        <ul class="sub_node">
             <li> Sub item 1</li>
        </ul>
   </li>
   <li class="parent_node"> Menu Header 2
        <ul class="sub_node">
             <li> Sub item 1</li>
        </ul>
   </li>  
</ul>

【讨论】：

我使用表格是因为我需要全角菜单，使用 div 我只能使用 display:table-cell 来制作它，这在 ie6 中不受支持。

我必须添加，我需要全宽菜单，菜单项拉伸在整个宽度上。