Question

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

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

在ie和opera中工作得很好，但在firefox下拉uls拉伸到整个屏幕！

任何帮助？

Answer 1

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

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

'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。

所以，Firefox没有做错任何事，尽管我希望它能复制其他浏览器并使其发挥作用。

要使其工作，您需要在每个div内添加一个包装器td（并调整您的CSS选择器）：

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

        ..
    </tr>
</table>

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

在Firefox中的位置相对

2 个答案: