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右浮動打破家長向左側

回答

相關問題