IE8 CSS右浮动打破家长向左侧

我有下面的代码，并与IE8的兼容性问题（原代码是更复杂，但是这表明了问题的梗概）IE8 CSS右浮动打破家长向左侧

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）

在真正的代码中点击'expand “按钮取消隐藏约10列在GridView，在这个例子中，我们只是把一吨X的成标签，但结果是一样的。

红色DIV膨胀（左侧），显示目前可见的内容。

我创造了这个代码Chrome设置为我的默认浏览器，该代码也工作得很好，我的备份浏览器（IE10），但是这个代码不在我们公司工作的浏览器（IE8）

在IE8两个橙色而红色DIV会扩展到蓝色父DIV的右侧，而不管红色DIV设置为浮动：右侧。

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

来源

2013-03-27 user2212219

我假设，因为没有人想出了一个答案这是一个IE8的问题，不能得到解决，尤其是IE10正常工作

来源

2013-04-02 06:31:28 user2212219

尝试设置overflow:auto父。

来源

2013-03-27 08:58:43 HasanAboShally

试过了，它停止了红股利的能力摆脱它的父给人的外观，红色的DIV已经已经削减一半出于某种原因 – user2212219 2013-03-27 09:02:02

所以尽量'溢出：visible'和'的text-align：right'父，并删除了'浮动：从right'儿子（同时保持“display：inline-block”）。 – HasanAboShally 2013-03-27 09:03:58

这有右对齐橙色DIV（事我不想做）的影响，而现在扩展到右边而不是左边的铬。在IE8中，“添加”内容打破了所有div。 – user2212219 2013-03-27 09:11:36

IE8 CSS右浮动打破家长向左侧

回答

相关问题