Float:右侧div仅出现在IE的下一行

Question

好的,所以在开始编写webapp之前,我正在研究UI的原型.我在Firefox工作时完成了设计,当然,当我在IE中测试时,有很多渲染问题.其中一个问题是,如果我有一个包含一些文本的div和另一个设置为float的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>

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