跨度在 div 内浮动 - 为啥在 IE 中换行？

Posted 2023-03-06

【中文标题】跨度在 div 内浮动 - 为啥在 IE 中换行？

【英文标题】：a span floated right within a div - why a new line in IE?跨度在 div 内浮动 - 为什么在 IE 中换行？

【发布时间】：2011-01-02 14:24:25

【问题描述】：

我在容器 div 中有 1 个跨度。我希望跨度向右浮动。 div 和 span 中的内容应该在一行上。

在 Firefox 中，这就是它的显示方式。

但在 IE 中，span 显示在新的一行：

http://i48.tinypic.com/etzg5f.png

为什么浏览器显示的内容不同？

【问题讨论】：

你能贴出你用来创建这个的 html 和 CSS 代码吗？

不能这样做，因为我是全新的。我会在评论中尝试： HTML: 选择目录 订阅 #currentCatalog# 所有视频 CSS：.catalogSelection#top #rss 浮动：对；

您需要将 float:right 元素放在非浮动项目之前。

感谢凯文，成功了。

【参考方案1】：

您应该将其他内容浮动到左侧。所以有两个花车；左右。

另一种方法是在跨度上使用绝对位置，在周围 div 上使用相对位置。然后您可以放置​​位置（上、左、右和下）并按您应该的方式定位元素！

【讨论】：

希望我能投票给你 100 次。您的回答刚刚结束了对 IE6 的“偏心”之一的解决方案的 2 小时探索。谢谢！

Firefox 也因存在此问题而闻名。在将跨度向右浮动之前，您总是需要向左浮动一些东西

【参考方案2】：

您可能会在 .catalogSelection#top #rss 样式定义中指定宽度。将元素设置为浮动时，它认为它是块级元素，并且由于您现有的文本没有浮动，它会换行到下一行。要么这样，要么您还需要将 Choose Catalog 文本浮动到左侧。或者正如凯文建议的那样，您可以将浮动元素放在非浮动元素的左侧，但这对于屏幕阅读器来说可能是一个问题，因为它在代码中从左到右读取，并且在语义上不正确。

【讨论】：

为选择目录文本创建另一个跨度并浮动到左侧。谢谢！