IE 6-7按下浮動div

我在IE7中測試我的網站時遇到了問題。我有兩個容器可以相互浮動。它在現代網絡瀏覽器中工作正常，但在IE的舊版本中，正確的容器被推到左側。任何人都可以看到問題嗎？主容器設置爲1000px寬度。這裏是有問題的2周的div代碼：IE 6-7按下浮動div

#content { 
    width: 725px; 
    float: left; 
    margin: 0 25px 25px 0; 
    clear: both; 
} 

#SideBar { 
    width: 225px; 
    min-height: 500px; 
    float: left; 
    margin: 0 0 50px 25px; 
} 

    #SideBar img { 
     display: table; 
     margin: 20px auto 0 auto; 
     border: 0; 
    }

這裏的HTML：

<div id="PageWrapper"> 
<nav id="MainMenu"> 
</nav> 
<header id="Header"> 
</header> 
<section id="PageSlider"> 

<div id="content"> 

</div> 
</section> 
<aside id="SideBar"> 

</aside> 
</div>

U可以看看該網站ashbaines.com

網站適於識別HTML5標籤。

謝謝

來源

2013-10-22 Excidium

明顯首先要問：你真的* *仍然需要支持IE6/7？ – Spudley

@Spudley - IE6僅在全球佔5％（http://www.ie6countdown.com/），但主要在中國，因此可能取決於目標市場。 – cloudfeet

@ user2906890 - 如果您設置了JsFiddle，也許人們可以更輕鬆地玩遊戲嗎？ – cloudfeet

在舊的IE版本中有一個邊緣較大的bug。嘗試將浮動元素設置爲「display：inline;」

以下是有關這個錯誤的一些信息： http://www.positioniseverything.net/explorer/floatIndent.html http://www.positioniseverything.net/explorer/doubled-margin.html

來源

2013-10-22 12:13:21 Johni

第一個改變你的代碼監守您使用html5標籤像nav，header，section和aside其不受舊的browers像IE7，IE8支載。所以我的建議改變你的代碼，然後嘗試。

看看這個代碼

<div id="PageWrapper"> 
    <div id="MainMenu"> 

    </div> 
    <div id="Header"> 

    </div> 
    <div id="PageSlider"> 
    <div id="content"> 

     </div> 
    </div> 
    <div id="SideBar"> 

    </div> 
</div>

來源

2013-10-22 12:13:52

我用html5shiv渲染舊的Web瀏覽器的對象，但問題仍然存在 – Excidium

您

和其他的解決方案後，把你的內容ID

之後

標記關閉。 @ user2906890 –

IE 6-7按下浮動div

回答

相關問題