当前位置：文江博客话题详情

Firefox 中的相对位置

发布于 2024-12-07 23:51:35 字数 428 浏览 1 评论 0原文

可能的重复：
Firefox 是否支持表格元素上的position:relative？

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

在 ie 和 Opera 中工作正常，但在 Firefox 下拉菜单中 uls 整体拉伸屏幕！

有什么帮助吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

第几種人 2024-12-14 23:51:35

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

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

“position:relative”对表行组的影响，
表头组、表页脚组、表行、表列组、
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>

position: relative does not work on table cells (<td> or display: table-cell).

From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.

So, Firefox is doing nothing wrong, although I do wish it would copy other browsers and make this work.

To make this work, you need to add a wrapper div inside each td (and adjust your CSS selectors):

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

        ..
    </tr>
</table>

回复收藏 0 原文

抹茶夏天i‖ 2024-12-14 23:51:35

就像 @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>

Like @Jared Farrish said using tables for layout is bad practice and the problem here.

#mainmenu ul li {
    width: 100%;
}

Is causing the li elements to display 100% of the screen. I would suggest you wrap the menu in a container div, there is absolutely no need for a table here you should put the menu in an unordered list something like: -

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

回复收藏 0 原文

~没有更多了~