2013-02-08 62 views
5

我在做一個Web應用程序在Chrome開發,也沒有問題。我決定在Firefox中快速測試該網站,以查看是否有任何差異,並在桌面上出現下拉時出現奇怪的行爲。怪異引導下拉行爲在Firefox

我做了一個fiddle單獨測試的行爲。您可以看到顯示在頁面底部的下拉菜單,而不是靠近td。如果你在Chrome中試用它,它完美的工作,但在Firefox中失敗。

調查後,我發現,在.dropdown-menu的CSS禁用這兩個屬性後,下拉按預期方式工作。

top: 100% 
left: 0; 

下拉工程時,在div,而不是在一個td

有什麼錯,使下拉菜單無法出現在正確的地方,或者是它只是一個必須修補我的精確需要的CSS故障表的HTML?

回答

9

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

即完美地工作,並檢查HTML標準後,TDS可以包含塊元素(如div的),並且因此,這是符合的HTML標準 – 2013-02-08 20:48:08

+0

甜。很高興幫助! – 2013-02-08 20:48:58