在IE瀏覽器中未按預期清理浮動div div

Question

我遇到了一個似乎只發生在Internet Explorer中的相當麻煩的bug。我創建了一個jsFiddle來說明我的挫敗感。

<div class="container" style="width: 802px;"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
</div> 

即使前三個塊的計算高度相同，第四個塊也不會清除到左側。有沒有人知道這個解決方案/黑客？

我需要這個工作與最小高度，而不是高度，我不能使用清除：左。

由於提前，

伊恩

Answer 1

問題是簡單地由於以下事實：所述第一兩個塊是1個像素比另外兩個高。

這會導致第4個塊捕捉第2個塊的右邊緣。

例如，如果您將.block的高度設置爲160像素，則會看到它們會按照您的預期包裝。

如果浮動元素具有不相似的高度，這是一個常見問題。

注意：行爲可能與瀏覽器有關的原因可能與瀏覽器中可能會有所不同的默認字體和字體大小有關。如果你使用的是較小的字體，那麼前兩個區塊會稍微縮短一點，所有區塊的最小高度爲155px，並且是相同的，所以問題不會表現出來。 （坐落於.blockfont-size: 0.75em，看看會發生什麼！）

$('.block').each(function (i) { 
 
    $('body').append('height of block' + i + ': ' + $(this).outerHeight() + '\n'); 
 
});

.container { 
 
    width: 802px; 
 
    border: 1px dotted blue; 
 
    overflow: auto; 
 
} 
 
.block { 
 
    float: left; 
 
    width: 33.333%; 
 
    background-color: #bbb; 
 
    padding: 40px; 
 
    border: 10px solid #fff; 
 
    box-sizing: border-box; 
 
    min-height: 155px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing eli.</div> 
 
    <div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscin.</div> 
 
    <div class="block">Lorel eum</div> 
 
    <div class="block">Lorem ipsumdentur parum clari,um.</div> 
 
</div>