三列CSS不能在IE中工作

嘿，我有以下的HTML和CSS，我不能強制IE瀏覽器正確顯示我的內容。中心和正確的div在每個組合中跳出來，我嘗試過溢出，我清除了先前在html中浮動的內容，但它不會工作。它適用於所有其他瀏覽器，但不適用於IE。三列CSS不能在IE中工作

HTML：

<div id="container"> 
    <div id="left"> 
    </div> 
    <div id="middle"> 
     <div id="middleone"> 
     </div> 
     <div id="middletwo"> 
     </div> 
    </div> 
    <div id="right"> 
    </div> 
</div>

的CSS是：

#container 
    { 
width: 1024px; 
height:170px; 
margin:auto; 

    } 


#left 
{ 
    width: 415px; 
    height: 89px; 
    float: left; 
    margin-top: 45px; 
    margin-left: 15px; 

} 


#middle 
{ 
    height: 152px; 
    width: 300px; 
     overflow: auto; 
    margin-top: 15px; 
} 


    #middleone 
    { 

    height: 152px; 
    float: left; 

    } 


    #middletwo 
    { 

    height: 152px; 
    float: right; 

    } 


#right 
{ 
float: right; 
height: 130px; 
width: 260px; 
margin-top: -132px; 
margin-right: 10px; 
}

來源

2012-12-06 Josip Gvozdić

嘗試以下操作：

#left { 
    float: left; 
} 
#middle { 
    float: left; 
} 
#right { 
    float: left; 
}

你似乎缺少您的中心或「中等」容器中的浮動。如果「左」和「右」容器浮動，則「中間」也必須浮動，否則您的佈局將被丟棄。你也可以：

#left { 
    float: left; 
} 
#middle { 
    float: left; 
} 
#right { 
    float: right; 
}

如果你有一個理由讓你的代碼顯示在右邊的容器。底線，你的「中間」容器需要一個浮動。

來源

2012-12-06 13:23:25 War10ck

沒有用。無論我做什麼，中心和右邊的div都跳出容器並連續顯示在波紋管中。而這只是在IE中。 –

@JosipGvozdić您的容器可能超過「容器」的寬度。 IE瀏覽器有點古怪，並且渲染項目與其他瀏覽器不同。它被稱爲[IE Box模型錯誤]（http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug）。嘗試減少每個容器的寬度，「左」，「中」和「右」1px，並再次嘗試使用浮動。您的利潤可能會丟掉IE。 – War10ck

沒有。嘗試減少內部容器的寬度，並超過1px +嘗試上面的展臺浮動示例，將無法正常工作。我認爲這個問題是在這個中心div的某個地方。在IE瀏覽器中，他被踢出了容器並顯示在http://postimage.org/image/w35difqi1/ –

三列CSS不能在IE中工作

回答

相關問題