Question

我遇到以下代码的问题以及与IE8的兼容性（原始代码更复杂，但这显示了问题的基础）

Protected Sub btnExpand_Click(sender As Object, e As System.EventArgs)
    If btnExpand.Text = "Expand" Then
        btnExpand.Text = "Collapse"
        lblContent.Text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    Else
        btnExpand.Text = "Expand"
        lblContent.Text = "Content"
    End If
End Sub

<style type="text/css">
    div {padding:10px; margin:20px;}
    .Section {width:550px;}
    .ClearBoth {clear:both; padding:0px; width:490px; margin:0px;}
</style>

<div>
    <div class="Section" style="float:left; background-color:Green;"></div>

    <div class="Section" style="float:Right; background-color:Blue;">

        <div style="background-color:Yellow;"></div>

        <div style="background-color:Red; display:inline-block; float:right;">
            <div style="background-color:Orange; display:inline-block;">
                <asp:Button ID="btnExpand" runat="server" Text="Expand" onclick="btnExpand_Click" />
                <br />
                <asp:Label ID="lblContent" runat="server" Text="Content"></asp:Label>
            </div>
            <div class="ClearBoth"></div>
        </div>
        <div class="ClearBoth"></div>

        <div style="background-color:Fuchsia;"></div>
    </div>
</div>

用户点击“展开”按钮，橙色DIV中会显示更多信息（注意：橙色DIV实际上是不可见的，这是我们在此示例中关注的红色DIV）

在实际代码中，单击“展开”按钮会在网格视图中取消隐藏大约10列，在此示例中，我们只是将大量X放入标签中，但结果是相同的。

红色DIV展开（向左）以显示现在可见的内容。

我使用Chrome创建此代码作为我的默认浏览器，此代码也适用于我的备份浏览器（IE10）但是此代码在我们公司的浏览器（IE8）中无效

在IE8中，橙色和红色DIV都会扩展到蓝色父DIV的右侧，而不管红色DIV是否设置为浮动：右边。

考虑到这在Chrome和IE10中有效，我假设我的代码在“开发时间”和转发时刻正确，但有没有人知道如何让这个工作在IE8？昨天我花了4个小时阅读花车上的W3C文件，并在这里搜索并搜索谷歌。

Answer 1

尝试将overflow:auto设置为父级。

Answer 2

我假设没有人为此提出答案这是一个IE8问题并且无法解决，特别是当IE10正常工作时

IE8 CSS右浮动向左突破父

2 个答案: