html - IE 9 は、ページの最後の要素の margin-bottom を無視します

Question

ページの最後の要素 (私の場合は div) に margin-bottom を追加すると、IE 9 では無視されます。つまり、最後の要素はウィンドウの下部と同じ高さになります。

これは既知の問題ですか? Chrome/Firefox では期待どおりに動作します。

Answer 1

これは、div がフローティングされているが、それを含む div がそうでない場合に当てはまります。

<div class='outer'>
   <div class='inner'>dfsdfs</div>
   <div class='inner'>sdfsdf</div>
   <div class='inner'>vxcvxv</div>
   <div class='inner'>cvxcv</div>
</div>

div.outer {
   background: green;
}

div.inner {
   height: 50px;
   background: red;
   margin-bottom: 50px;
   display:block;
   float:left;
   clear:left;
}

Answer 2

問題を再現できるかどうかを確認するための簡単なテストをセットアップしました。まず、あなたのリードに従って、いくつかの HTML を提供しました - 最後の要素を a にするようにしてdivください:

<div></div><div></div>
<div></div><div></div>

次に、いくつかのスタイル:

div {
  height: 50px;
  background: red;
  margin-bottom: 50px;
}

次に、ブラウザスタックを使用して Windows 7 で IE9 をテストしましたが、問題を再現できませんでした。私の場合、ブラウザは最後の要素の周りに適切なスペースを適切にレンダリングしました。

フィドル: http://jsfiddle.net/jonathansampson/EgjVn/