html - IE 9 忽略页面上最后一个元素的边距底部

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;
}

然后我继续使用browserstack在 Windows 7 上测试 IE9 - 我无法重现您的问题。就我而言，浏览器在最后一个元素周围正确呈现了适当的间距。

小提琴：http: //jsfiddle.net/jonathansampson/EgjVn/