IE7浮動消失，當他們的父母是位置：相對

這是一個削減版本的問題，我面臨的IE7。在所有其他（較新的）瀏覽器中，這顯示罰款...爲什麼position:relative;對float: right;或float: left;有影響？有沒有辦法在不犧牲float的功能的情況下保留position: relative？IE7浮動消失，當他們的父母是位置：相對

JS提琴：http://jsfiddle.net/uW7JV/2/

沒有position: relative; enter image description here

隨着position: relative;（紅色框） enter image description here

更精簡版：http://jsfiddle.net/uW7JV/4/

有趣...刪除<div class="clearboth"></div>允許t他滿足地展示。但是，我確實需要那些功能，所以我仍在尋找修復方法。 http://jsfiddle.net/uW7JV/9/

來源

2013-12-11 allicarn

你真的需要那個親戚嗎？由於IE7行爲更像IE6（我認爲這是最糟糕的），我想你應該在相對位置設置浮標。位置：relative在屏幕上進行迴流/刷新，所以父級重畫，而不是那些真正在流程中的孩子......浮動。（希望你明白我的意思） –

在這個例子中，它不相關，但我確實需要它爲我創建的網站。這不僅僅是父母內部的浮動元素。 – allicarn

好吧，在標準模式下以相對定位繼續在IE7或6下播放，看看我的意思是在屏幕上回流。如果你曾經爲IE6/7編寫代碼，那麼你可能會重新編寫一些內容，這些內容可能與hasloyout相關，或者相對而言是保持元素在屏幕上顯示的治療方法。你正在處理着名的haslayout :) :) –

您需要將overflow: hidden添加到.column-wrapper，以便它包裹其漂浮的孩子。完成後，您完全不需要.clearboth div和CSS。

您需要解決的另一個問題是列寬，因爲box-sizing: border-box在IE7中不受支持，所以在分配width時需要考慮填充。

div { 
    padding: 5px 1%; 
} 
.column-wrapper { 
    background: orange; 
    position: relative; 
    overflow: hidden; 
} 

.main { 
    background: yellow; 
    float: right; 
    width: 64.6%; 
} 
.sidebar { 
    float: left; 
    background: green; 
    width: 31.3%; 
}

DEMO：http://jsfiddle.net/myajouri/uW7JV/15/

另一種方式去了解這是使用Clearfix hack

.clearfix { 
    zoom: 1; /* for IE6/7 */ 
} 

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

然後clearfix類添加到.column-wrapper。

來源

2013-12-11 18:14:59 myajouri

是的，我意識到盒子尺寸問題。這只是爲了演示的緣故。 'overflow：hidden;'並不理想，因爲我需要讓事物「懸浮」浮動的列。 – allicarn

在這種情況下，使用'zoom：1'來觸發'.column-wrapper'上的'hasLayout'。我建議使用Clearfix hack。我會更新我的答案。 – myajouri

感嘆。爲什麼我沒有想到'zoom：1' ......就像IE 101一樣。我保持原來的代碼，只是用'position：relative;'將它添加到div中。魔法。謝謝！ – allicarn

IE7浮動消失，當他們的父母是位置：相對

回答

相關問題