Hành vi thả xuống của trình khởi động lạ trong Firefox

Question

Tôi đang làm một ứng dụng web đang phát triển trên Chrome và không có vấn đề gì. Tôi đã quyết định kiểm tra trang web nhanh chóng trong Firefox để xem liệu có bất kỳ sự khác biệt nào và đưa ra một hành vi kỳ lạ trên một trình đơn thả xuống khi trên bàn.

Tôi đã thực hiện một fiddle để kiểm tra hành vi một mình. Bạn có thể thấy menu thả xuống xuất hiện ở cuối trang thay vì phải gần với td. Nếu bạn thử nó trong Chrome nó hoạt động hoàn hảo nhưng không thành công trong Firefox.

Sau khi điều tra, tôi thấy rằng sau khi vô hiệu hóa hai thuộc tính này trong css của .dropdown-menu, công việc thả xuống như mong đợi.

top: 100% 
left: 0; 

Các thả xuống hoạt động khi trên div, nhưng không phải khi trên td.

Có điều gì sai trong html của bảng khiến cho trình đơn thả xuống không xuất hiện ở đúng vị trí hay chỉ là lỗi css cần được vá cho nhu cầu chính xác của tôi?

Answer 1

Firefox không hỗ trợ position: relative; trên table ô. Để giải quyết vấn đề này, bạn cần phải kéo thả xuống trong một 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>