Firefox не может правильно расположить вложенные таблицы?

#javascript #html #css #firefox

#javascript #HTML #css #firefox

Вопрос:

Я хочу реализовать сворачиваемое меню. Я планирую использовать компонент table для имитации меню и вложить вложенную таблицу в ячейку таблицы для имитации вложенного меню.

Ниже приведен мой код, он работает, как ожидалось, в 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 считает, что атрибуты «left» и «top» для меню уровня 3 относятся к меню уровня 1, поэтому он неправильно расположил меню уровня 3. Другие браузеры вычислят базу смещения в меню уровня 2, которое работает должным образом.

Это ошибка в Firefox? Если да, то как я могу это обойти? Я хочу, чтобы мой код имел одинаковое поведение во всех основных браузерах.

1. О боже. Давно я не видел столько таблиц в одном месте 🙂 🙂 Добро пожаловать в SO.

2. Черт возьми, я думаю, вам пришлось бы указать td s position: relative , чтобы это сработало, но это вызовет другие проблемы. Я думаю, вам следует сделать это с гораздо, гораздо более простой структурой. Мне пора идти, но я уверен, что кто-нибудь предложит.

3. @ooplidi, я должен согласиться с @Pekka — у вас возникнут дополнительные проблемы, если вы используете Relative, но это также лучший способ сделать это. Это действительно должно быть в таблицах?

4. Опять же, да, Пекка прав — вам нужен контейнер с position: relative, чтобы следующий элемент position: absolute просматривал координаты контейнера. В противном случае все элементы position: absolute могут подняться вверх по дереву, чтобы найти последний контейнер position: relative.

5. Спасибо за все ваши предложения 🙂

Ответ №1:

Перенос таблиц в divs, похоже, решает проблему:

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

На самом деле было бы лучше вообще не использовать таблицы, а только divs с правильными границами.

Ответ №2:

Это известная ошибка: https://bugzilla.mozilla.org/show_bug.cgi?id=63895 .