Потрясающее поведение загрузочного бутстрапа в Firefox

Question

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

Я сделал fiddle, чтобы проверить поведение в одиночку. Вы можете увидеть раскрывающийся список внизу страницы, а не справа от td. Если вы попробуете его в Chrome, он отлично работает, но не работает в Firefox.

После расследования я обнаружил, что после отключения этих двух атрибутов в css .dropdown-menu выпадающее меню работает должным образом.

top: 100% 
left: 0; 

Раскрывающийся работает, когда на div, но не тогда, когда на td.

Есть ли что-то не так в html таблицы, из-за чего выпадающее меню не отображается в нужном месте, или это просто сбой css, который должен быть исправлен для моей точной потребности?

Answer 1

Firefox не поддерживает position: relative; на table. Чтобы обойти это, вам нужно обернуть раскрывающееся меню в 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>