IE7：由带有元素“float：right;”和边距的 Clearfix 容器引起的额外空间

Question

我在 IE7 中遇到了一个奇怪的错误，其中边距似乎被添加了两次。一次位于thing 元素下方的正常位置，另一次位于按钮和容器底部之间。 注意，按钮本身有margin-bottom，但我说的是在其下方添加的额外边距。

您可以在下面的 gif 中看到，当我在 thing 元素上切换 margin-bottom 时，它会切换 thing 元素和按钮（正常）之间的空间，以及按钮和结尾之间的空间容器（错误）。

我感觉这是.block 上使用的zoom: 1; hasLayout clearfix 的一部分。如果我添加一个显式的clear: both; div，它也有这个额外的空间，但可以通过将height: 0; 放在清晰的 div 上来缓解。

这个额外的空间只出现在按钮上的float: right;

我使用的是 HTML5 doctype，但也尝试过严格的 doctype，它在真正的 IE7 或模拟版本中没有效果。

如何在保持自清micro-clearfix dom结构的同时去掉底部多余的空间？

下面的 gif 来自具有 IE7 仿真/兼容性的 Windows 8.1 IE。这是same bug in true IE7 on Windows XP。

代码：

.block
{
    background: #888888;
    
    /* Clearfix */
    zoom: 1;
}

.thing-with-margin
{
    margin-bottom: 10px;
    
    background: #88dd88;
}

.button
{
    float: right;
    
    /* Make the input/button shrink to the correct size in ie7 */
    overflow: visible;
    
    margin-bottom: 10px;
    padding: 0 8px;
    
    background: #6666cc;
    border: 0;
}


.heading
{
    background: #aaaaaa;
    border-bottom: 1px solid #000000;
}

This is IE7 only code at the moment stripped down to show off this problem. View it in IE7 mode.
<br />

<div class="block">
    <div class="heading">Aenean vulputate</div>
    
    Lorem ipsum dolor sit amet
    
    <div class="thing-with-margin">
        Ipsum dolor amet Lorem.
    </div>
    
    <input type="submit" class="button" value="Sign Up">
</div>

Answer 1

我没有找到解释或其他人遇到同样的问题。

但我找到了一个效果很好的解决方案，不幸的是有点老套。

将此缩放声明与zoom: 1; 并排添加到.block 父元素上。 expression(dynamic property) 值适用于 IE7- 并允许基本的 JavaScript。

zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");

来源：Better float containment in IE using CSS expressions 中的 NBFC 溢出黑客

---

完全清除修复：

我建议您使用条件样式表而不是 CSS 属性黑客 (*)，但我已将它们留在里面，所以它很好并且可复制粘贴。

.clearfix
{
    /* Clearfix: http://nicolasgallagher.com/better-float-containment-in-ie/ */
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}

.clearfix:before,
.clearfix:after
{
    content: ' ';
    display: table;
}

.clearfix:after
{
    clear: both;
}

.block
{
  background: #888888;

  /* Clearfix: http://nicolasgallagher.com/better-float-containment-in-ie/ */
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
.block:before,
.block:after
{
  content: ' ';
  display: table;
}
.block:after
{
  clear: both;
}

.thing-with-margin
{
  margin-bottom: 10px;

  background: #88dd88;
}

.button
{
  float: right;

  /* Make the input/button shrink to the correct size in ie7 */
  overflow: visible;

  margin-bottom: 10px;
  padding: 0 8px;

  background: #6666cc;
  border: 0;
}


.heading
{
  background: #aaaaaa;
  border-bottom: 1px solid #000000;
}

<div class="block">
  <div class="heading">Aenean vulputate</div>

  <div>
    Lorem ipsum dolor sit amet
  </div>

  <div class="thing-with-margin">
    Ipsum dolor amet Lorem.
  </div>

  <input type="submit" class="button" value="Sign Up">
</div>