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>

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

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”，它似乎有效。

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

4 个答案: