Question

我想实现一个可折叠的菜单。我计划使用表组件来模拟菜单，并将子表嵌套到表格单元格中以模拟子菜单。

以下是我的代码，它在IE，Chrome和Safari中正常运行，但在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>

似乎Firefox认为3级菜单的“left”和“top”属性是相对于1级菜单的，所以它错误地布置了3级菜单。其他浏览器将在2级菜单上计算偏移量，这可以按预期工作。

这是Firefox中的错误吗？如果是这样，我该如何解决呢？我希望我的代码在所有主流浏览器中都具有相同的行为。

Answer 1

在div中包装表似乎解决了这个问题：

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

事实上，最好不要使用表格，而只使用具有适当边框的div。

Answer 2

这是一个众所周知的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=63895。

Firefox无法正确布局嵌套表格？

2 个答案: