css - 古き良きファッションie7幅と明確な問題（過去からの爆発）デモ付き

Question

私は非常に柔軟な sass/grid フレームワークを作成している最中で、IE7 ブラウザーで奇妙な問題が発生しましたが、その理由が完全には理解できません。

フィドルはこちら: http://jsfiddle.net/adrianjacob/mbvw5/

(ほとんどの人をテストする最も簡単な方法は、IE9/IE10 で IE dev バーを使用して IE7 モードを実行することです)

ref のコード(および cos スタック オーバーフローは、フィドル リンクだけでこの q を投稿しません):

<div id="container1">
    <div class="row clearfix">
        <div class="col1">col1</div>
        <div class="col2">row width == 398</div>
        <div class="col3">col3</div>
    </div>
</div>
<br>
<div id="container2">
    <div class="row clearfix">
        <div class="col1">col1</div>
        <div class="col2">row width == 400</div>
        <div class="col3">col3</div>
    </div>
    <br>
    <div class="row">
        <div class="col1">col1</div>
        <div class="col2">row width == 400</div>
        <div class="col3">col3</div>
        <div class="clear"></div>
    </div>
</div>

#container1 { margin:0 auto; width:398px; }
#container2 { margin:0 auto; width:400px; }
.row { background:red; width:100%; }
.col1 { float:left; width:13%; margin:1%; background:pink; }
.col2 { float:left; width:63%; margin:1%; background:yellow; }
.col3 { float:left; width:18%; margin:1%; background:cyan; }

.clear { clear:both; }
.clearfix { zoom:1; }
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }

ここで行われている 2 つの非常に明確な事柄について、人々の意見をお待ちしています。

1. 新しいマイクロ クリアフィックスが機能しない/マージンを表示する/赤い背景を表示するのはなぜですか?

2. コンテナーが 400px の場合、列は問題ないのに、398px のコンテナーを使用すると 3 番目の列が押し下げられ、新しい行で折り返されるのはなぜですか?

IE8+ および他のすべての優れたブラウザーでは、これは問題ではないことに注意してください。IE6も影響を受けると確信していますが、テストできません。

広告。