5

ChromeでWebアプリケーションを開発していますが、問題はありませんでした。私はFirefoxでサイトを迅速にテストして違いがあるかどうかを確認することにし、テーブルにいるときのドロップダウンで奇妙な動作を思いついた。

私は一人で行動をテストするためにフィドルを作りました。tdのすぐ近くではなく、ページの下部にドロップダウンが表示されます。Chromeで試してみると、完全に機能しますが、Firefoxでは失敗します。

調査の結果、のcssでこれら2つの属性を無効にした後.dropdown-menu、ドロップダウンが期待どおりに機能することがわかりました。

top: 100%
left: 0;

ドロップダウンは、にある場合は機能しますdivが、にある場合は機能しませんtd。

ドロップダウンが適切な場所に表示されない原因となるテーブルのhtmlに何か問題がありますか、それとも正確なニーズに合わせてパッチを適用する必要があるのはcssの失敗だけですか？

4

1 に答える 1

9

Firefox はセルをサポートposition: relative;していません。tableこれを回避するには、ドロップダウンをdiv.

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>
于 2013-02-08T20:35:32.840 に答える