Firefox 中奇怪的引导下拉菜单行为

Question

我正在做一个在 Chrome 上开发的网络应用程序，没有问题。我决定在 Firefox 中快速测试该网站，看看是否有任何差异，并在桌子上的下拉菜单中发现了一个奇怪的行为。

我创建了一个fiddle 来单独测试行为。您可以看到下拉菜单出现在页面底部，而不是靠近 td。如果您在 Chrome 中尝试它，它可以完美运行，但在 Firefox 中会失败。

经过调查，我发现在.dropdown-menu的css中禁用这两个属性后，下拉菜单按预期工作。

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>