浮动元素在 ie6/7 中掉到下一行答案

【问题标题】：Floated element dropped to next line in ie6/7浮动元素在 ie6/7 中掉到下一行
【发布时间】：2014-01-15 01:11:58
【问题描述】：

当在 ie6 和 ie7 中也有文本的容器内浮动 div 时，我似乎遇到了浮动问题。

如果您在 FF 或 ie8+ 中查看此处的星级评分，您会看到星星应位于容器文本的左侧（实际评分为数字），但尽我所能，我终生无法我得到它的工作，他们只是下降到下面。

我希望这是有道理的，我花了大约 4 个小时尝试不同的东西，将显示设置为 inline-block 等，但无济于事。

【问题讨论】：

【解决方案1】：

这似乎有效

<div class="stars" style="width: 150px !important; float: right;">
<span class="starsAverage" style="float: left;">

【讨论】：

嗯，这似乎把平均值放在星星旁边，这很酷，但它仍然下降了一条线，但在上面的线上留下了“（）”。
它在 IE7 上运行良好。您是在 IE8 和 IE7 模式下使用 IE9，还是单独使用它们。您在 IE6 中的测试情况如何？
我使用 ie6 使用 ie tester，本机运行 ie8/firefox。 ie9 中的问题是另一个问题，因为它似乎只显示单选按钮，所以我认为 javascript 在那里无法正常工作。
按照您的说法，我更新了链接中的 css，那么这是否适合您？我基本上希望它看起来像“评分：（3）*****”都在同一行
请看看这个。为什么有区别？ (IE9) - i51.tinypic.com/2q9vtdg.jpg (IE7) - i51.tinypic.com/10o4dgg.jpg

【解决方案2】：

好的，我明白了，伙计。请跟随。

1 - 首先我们删除“float:left”

DIV.rating .stars SPAN.starsAverage
{
float: left /*remove this*/
}

2 - 我们再次删除“float:left”并将“display:block”更改为“display:inline;”

.ui-stars-star
{
float: left; /*remove this*/
display: inline; /*changed from display: block;*/
}

3 - 接下来我们将宽度从“8px”更改为“18px”，并为每个 div 添加“zoom: 1”

<div class="ui-stars-star ui-stars-star-on" style="width: 18px; zoom:1">

4 - 接下来我们删除“margin-left: -8px;”来自上述 div 中的“a”

inline style
{
margin-left: -8px; /*remove this*/
}

5 - 现在我们改变宽度

DIV.rating
{
width: 260px;
}

6 - 我们再次改变宽度

DIV.rating .stars
{
width: 210 !important;
}

还有哇。在这里你有它。耗时：2小时31分钟。我会把账单寄给你。

【讨论】：