Comportamento anomalo del dropdown del bootstrap in Firefox

Question

Sto facendo un'applicazione Web in sviluppo su Chrome e non ho avuto problemi. Ho deciso di testare rapidamente il sito in Firefox per vedere se ci fosse qualche differenza e ho trovato un comportamento strano su un menu a discesa quando su un tavolo.

Ho effettuato uno fiddle per verificare il comportamento da solo. Puoi vedere il menu a discesa che appare in fondo alla pagina invece che vicino al td. Se lo provi in ​​Chrome funziona perfettamente ma non riesce in Firefox.

Dopo le indagini, ho scoperto che dopo aver disabilitato questi due attributi nel css dello .dropdown-menu, il menu a discesa funziona come previsto.

top: 100% 
left: 0; 

La discesa funziona quando su un div, ma non quando su un td.

C'è qualcosa di sbagliato nel codice html della tabella che fa apparire il dropdown nel posto giusto, o è solo un errore di css che deve essere corretto per la mia precisa necessità?

Answer 1

Firefox non supporta position: relative; su table celle. Per ovviare a questo, dovrai completare il menu a discesa in un div.

Here's a working example on jsFiddle.

<table class="table table-bordered"> 
    <tr> 
    <td class="rl2"> 
     <div class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a> 
     <ul class="dropdown-menu" aria-labelledby="dLabel" role="menu"> 
      <li><a href="#" class="rl1">rl1</a></li> 
      <li><a href="#" class="rl2">rl2</a></li> 
     </ul> 
     </div> 
    </td> 
    <td>...</td> 
    <td>...</td> 
    </tr> 
</table>