firefox中的位置相对[重复](position relative in firefox [duplicate])

firefox中的位置相对[重复](position relative in firefox [duplicate])

可能重复： Firefox支持位置：相对于表元素吗？

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

在ie和opera中工作正常，但在firefox下拉uls拉伸整个屏幕！

有帮助吗？

Possible Duplicate: Does Firefox support position: relative on table elements?

Here is an example: full-width menu as a table and ul-s as dropdown menus. http://cssdesk.com/dW7WS

Works fine in ie and opera, but in firefox dropdown uls streched on whole screen!

Any help?

最满意答案

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没有做错任何事，虽然我希望它能复制其他浏览器并使其工作。

要使其工作，您需要在每个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>