了解图像在不同浏览器中的位置
我想更多地了解 CSS，现在我有一个在两个浏览器和一个名为“explorer”的程序中呈现不同效果的示例。以下是我尝试清除任何令人不安的细节的示例页面的链接： http://csaladterapia.hu/example .html
在最新的 Firefox 版本中，图像被放置在字段集中，因为它是 float:right 而其他元素是 clear:none。在 Chrome 和 IE 中，图像放置在字段集上方。
你能帮我理解其中的区别吗？
I would like to understand CSS more and now I have an example that renders differently in two browsers and in a program called "explorer". Here is the link to the example page that I tried to clean from any disturbing details: http://csaladterapia.hu/example.html
In the latest Firefox version the image is placed inside the fieldset because it is float:right and the other elements are clear:none. In Chrome and IE the image is placed above the fieldset.
Could you help me understanding the difference?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Firefox的解释是错误的，甚至是很奇怪的。浮动元素不应该将元素放置在其他元素之上 - 它只是将它们从文档流中取出，将它们放在当前行的左侧/右侧。如果浮动后面的元素不太宽，并且没有“clear”属性，它将被放置在同一行。
在您的示例中，以下元素是 div，默认宽度为 100%，因此不能将其放置在同一行上。
Firefox 所做的事情非常奇怪 - 即使在以下元素上clear:left 也没有效果。
参考：
http://coding。 smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
The interpretation of Firefox is wrong, and even very strange. Floating an element should never place the element on top of other elements - it just takes them out of the document flow, puts them to the left/right on the current line. If the element following the float is not too wide, and has no 'clear' property, it will be placed on the same line.
In your example the following element is the div, which defaults to 100% width, so it can't be placed on the same line.
What Firefox is doing is very strange - even clear:left on the following element has no effect.
Reference:
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
这是一个奇怪的行为，我不确定这里的正确行为是什么。这是因为
fieldset的width为 95%。删除此宽度属性会在 Firefox 和 Chrome 中显示相同的行为。如果您希望图像出现在
fieldset中，则将图像移动到图例之后的第一个元素，这样您应该在所有浏览器中看到一致的行为。Firefox 试图在保持
float的同时尊重其宽度，但 Chrome 似乎希望将字段集移动到新行，因为它是块状且宽度为 95%。在这种情况下，您可以按上述方式更改标记。
This is a strange one, and i'm not sure what the correct behavior is here. It is due to the
widthof thefieldsetbeing 95%. Removing this width attribute shows the same behavior in Firefox and Chrome.If you want the image to appear in the
fieldsetthen move the image to be the first element after the legend, this way you should see consistent behavior in all browsers.Firefox tries to honor the
widthof this whilst maintaining thefloatbut it seems Chrome wants to move the fieldset onto a new line due to being block and 95% width.In this case you can change the mark-up as mentioned.