Question

我正在开发一个在Chrome上开发的Web应用程序并没有问题。我决定在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>

Firefox中奇怪的引导下拉行为

1 个答案: