css - float :right divs appear on next line in IE only

Question

好的，所以在开始编写 Web 应用程序代码之前，我正在制作我的 UI 原型(prototype)。我在 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 中工作是将 float div 放在其父级的开头，如下所示...

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

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

Answer 1

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

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

不知道你有没有使用float的需求。使用定位方法会导致被定位的元素在正常流中不占用空间，否则会保持正确的源顺序并在视觉上完成我认为你想做的事情。