Firefox can not layout nested tables properly?
I want to implement a collapsible menu. I plan to use table component to simulate a menu, and nest a sub table into a table cell to simulate a sub menu.
Below is my code, it works as expected in 开发者_JS百科IE, Chrome and Safari, but it doesn't work well in Firefox:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
It seems that Firefox think the "left" and "top" attribute for the level 3 menu is relative to the level 1 menu, so it layout the level 3 menu incorrectly. Other browsers will calculate the offset base on the level 2 menu, that works as expected.
Is it a bug in Firefox? If so how can I work around it? I want my code to have the same behavior in all major browsers.
Wrapping tables in divs seems to solve the issue:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<div style="position:absolute; left:200px; top:60px; z-index:1">
<table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<div style="position:absolute; left:200px; top:30px; z-index:1;">
<table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div>
</td>
</tr>
</table>
</div>
</body>
</html>
In fact it would be better not to use tables at all, but only divs with proper borders.
It is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=63895 .
加载中,请稍侯......
精彩评论