0

我对以下代码和与 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 是否设置为 float:right，橙色和红色 DIV 都会扩展到蓝色父 DIV 的右侧。

考虑到这在 Chrome 和 IE10 中有效，我假设我的代码在“开发时间”和转发中的这一刻是正确的，但有人知道有什么方法可以让它在 IE8 上工作吗？昨天我花了 4 个小时阅读有关浮动和显示的 W3C 文档，并在这里和谷歌搜索。

4

2 回答 2

0

我假设没有人对此提出答案，这是一个 IE8 问题并且无法解决，尤其是在 IE10 正常工作的情况下

于 2013-04-02T06:31:28.107 回答
0

尝试设置overflow:auto为父级。

于 2013-03-27T08:58:43.087 回答