Firefox에서 이상한 부트 스트랩 드롭 다운 동작이 발생했습니다.

Question

Chrome에서 웹 응용 프로그램을 개발하고 있어도 문제가 없었습니다. 필자는 파이어 폭스에서이 사이트를 신속하게 테스트하여 어떤 차이가 있는지를 확인하고 테이블에서 드롭 다운시 이상한 행동을 취하기로 결정했다.

나는 행동을 단독으로 테스트하기 위해 fiddle을 만들었습니다. td 바로 옆에있는 대신 페이지 하단에 나타나는 드롭 다운을 볼 수 있습니다. 크롬에서 시도해도 완벽하게 작동하지만 Firefox에서는 실패합니다.

조사한 결과, .dropdown-menu의 CSS에서이 두 속성을 비활성화 한 후 드롭 다운이 예상대로 작동하는 것으로 나타났습니다.

top: 100% 
left: 0; 

드롭 다운이 아닌 경우 td에, 때 div에서 작동합니다.

테이블의 HTML에 문제가있어 드롭 다운이 올바른 위치에 표시되지 않거나 정확한 요구 사항에 맞게 패치해야하는 CSS 오류일까요?

Answer 1

Firefox는 table 세포에서 position: relative;을 지원하지 않습니다. 이 문제를 해결하려면 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>