Question

我遇到了一个相当讨厌的错误，这似乎只发生在Internet Explorer上。我创建了一个jsFiddle来说明我的挫败感。

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

即使前三个块具有相同的计算高度，第四个块也不会向左清除。有谁知道任何解决方案/黑客为此？

我需要这个才能使用最小高度，而不是高度，我不能使用clear：left。

提前致谢，

伊恩

Answer 1

问题仅仅在于前两个块比另外两个块高1个像素。

这导致第4个块捕获第2个块的右边缘。

例如，如果将.block的高度设置为160px，您将看到它们按预期包装。

如果浮动元素具有不相似的高度，则这是一个常见问题。

注意：行为可能与浏览器相关的原因可能与浏览器可能不同的默认字体和字体大小有关。如果你使用稍微小一点的字体，那么前两个块会略短，然后所有的块都会占据155px的最小高度，并且是相同的，所以问题不会显现出来。（在font-size: 0.75em设置.block，看看会发生什么！）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在IE中，浮动的div没有按预期清除

1 个答案: