5

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

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

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

top: 100%
left: 0;

下拉菜单在 a 上有效div，但在 a 上无效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 回答