了解图像在不同浏览器中的位置

Question

我想更多地了解CSS，现在我有一个在两个浏览器和名为“explorer”的程序中呈现不同的示例。以下是我尝试从任何令人不安的细节中清除的示例页面的链接：http://csaladterapia.hu/example.html

在最新的Firefox版本中，图像放在字段集中，因为它是float:right而其他元素是clear:none。在Chrome和IE中，图像位于字段集上方。

你能帮我理解差异吗？

Answer 1

Firefox的解释是错误的，甚至很奇怪。浮动元素应永远将元素放在其他元素之上 - 它只是将它们从文档流中取出，将它们放在当前行的左/右。如果float之后的元素不是太宽，并且没有'clear'属性，它将被放在同一行。

在您的示例中，以下元素是div，默认为100％宽度，因此不能放在同一行。

Firefox正在做的事情非常奇怪 - 甚至是明确的：左边的以下元素没有效果。

参考：

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

这是一个奇怪的，我不确定这里的正确行为是什么。这是由于width的{​​{1}}为95％。删除此宽度属性会在Firefox和Chrome中显示相同的行为。

如果您希望图像显示在fieldset中，则将图像移动到图例后面的第一个元素，这样您就可以在所有浏览器中看到一致的行为。

Firefox试图在保持fieldset的同时尊重width，但似乎Chrome希望将字段集移动到新行，因为它是阻塞和95％宽度。

在这种情况下，您可以更改标记，如上所述。