Question

以下是重现此问题的相关HTML代码段：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Test</title>
  </head>
  <body>
  <div style="width: 400px; margin: 0 auto;">
  <ol>
    <li>
        <div style="float: right;">right1</div>
        <div style="float: right;">right2</div>
        <p>Why is there space above this line in FF?</p>
    </li>
  </ol>
  </div>
  </body>
</html>

在我测试过的浏览器中，这只发生在Firefox（在我的情况下为v11），但在IE 6-9和Chrome中都没有。我已经尝试将它粘贴到JSFiddle中以便于查看，但它实际上在我们的输出窗口中使用Firefox显示我想要的（即没有上面的空格）。

似乎只有2个或更多右浮动div在p标签上方出现，所以我能够通过将2个浮动div包含在另一个右浮动div中来“解决”该问题。尽管如此，为什么会发生这种情况？这是Firefox中的错误吗？

在应用修复之前（间隔上方应用标签）： Before the fix is applied

应用修复后（Execute PowerShell Script上方没有间距）： After the fix is applied

Answer 1

您是否检查过浏览器之间的CSS不一致？尝试包含CSS重置文件，看看是否能解决问题。

Answer 2

只是一个想法，但我认为这是每个浏览器的默认样式的结果之一，在这种情况下，Chrome和其他浏览器（除了Firefox）在列表项内显示p标记默认情况下，作为内联项，因此有序列表中的数字并排显示p标记。在Firefox中，当您将p标记明确设置为display:inline时，您可以获得与其他浏览器相同的效果，而不是默认的display:block。

Answer 3

它没有像其他元素一样漂浮，所以它显示更内联。您需要对这些样式更具体一些，以确保它们位于您希望的位置。

如果你向左或向右浮动段落，会发生什么？

另外，为什么在<li>元素中有div？尽管在某些内联元素中允许使用HTML5块元素，但我无法想象您需要像这样格式化代码的原因。

Answer 4

快速解决方法是在使用两个div浮动后创建一个div。这不是理想的，但会起作用

Answer 5

我建议使用Firebug来检查页面上的元素。使用Layout feature查看P和DIV元素的填充，边距，偏移和边界。

没有更好的方法来了解Firefox中的内容，而不是在Firebug中使用Inspect。它会很快告诉你意想不到的风格，以及它们来自哪里。

为什么这个<p>标签似乎只在Firefox中有一个上限？</p>

5 个答案: