浮动：仅在 IE 中右 div 出现在下一行

Question

好的，在开始编写 Web 应用程序之前，我正在开发 UI 原型。我的设计大部分是在 Firefox 中完成的，（当然）当我在 IE 中测试它时，存在很多渲染问题。其中一个问题是，如果我有一个包含一些文本的 div 和另一个设置为 float:right 的 div，则该嵌套 div 将显示在下一行，位于其父 div 下方。这是最简单形式的问题标记...

<div style="background-color:red;">
    Text
    <div style="background-color:yellow; float:right;">Right</div>
</div>

我在互联网上搜索解决方案，我发现唯一可以在 IE 中工作的相关解决方案是将浮动 div 放在其父级的开头，如下所示

<div style="background-color:red;">
    <div style="background-color:yellow; float:right;">Right</div>
    Text
</div>

...实际上，嵌套的 div 有一个类，而我的 CSS 浮动了该类。但是，如果我最终制作另一个针对移动设备的样式表并且我不再希望内部 div 浮动，会发生什么情况？那么 HTML 中的内容本身就会乱序，只是为了适应 IE 中的 CSS 问题。有更好的方法来解决这个问题吗？

Answer 1

我的一位同事最近遇到了一个非常相似的问题。我建议简单地使用定位而不是浮动。我相信你可以在这里做同样的事情：

<div style="background-color:red; position:relative;">
    Text
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>

我不知道你是否需要使用浮动。使用定位方法将导致定位元素在正常流程中不占用空间，但保持正确的源顺序并在视觉上完成我认为您想要做的事情。

Answer 2

在内部 div 上设置宽度值并使其显示：inline-block。 Div 是块元素，占用父元素 100% 的宽度，这就是 IE 将其放在下一行的原因。

Answer 3

我不确定这对你来说是否可行，但是将外部 div 中的文本放在它自己的 div 中似乎可以解决问题

<div style="background-color:red;">
    <div style="float: left;">Text</div>
    <div style="background-color:yellow; float:right;">Right</div>
</div>

Answer 4

我刚刚在 IE7 中遇到了这个问题 - 就我而言，要清除浮动的项目无论如何都是全宽的。我只是将其设置为“float: none;clear: left”，它似乎有效。