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

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

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

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

источник

2010-05-19 user344973

О мальчик. Прошло некоторое время, что я видел, что много таблиц в одном месте :) :) Добро пожаловать в SO. –

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

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

Оберточные таблицы в дивы, кажется, решить проблему:

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

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

источник

2010-05-19 11:16:37 kgiannakakis

Я занимаюсь второй политикой «Нет стола», пропуская @kgiannakakis^_^ –

+1 для последнего предложения. Таблицы не должны использоваться для макетов. –

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

источник

2010-05-22 23:43:02

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

ответ

Смежные вопросы