IE7：由Clearfix容器引起的额外空间，元素为“float：right;”和margin

Question

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

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

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

此额外空格仅在按钮上显示float: right;

我使用的是HTML5文档类型，但也尝试过严格的doctype，它对真正的IE7或模拟版本没有影响。

如何在保持自清除micro-clearfix dom结构的同时删除底部的额外空间？

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

代码：

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

将此缩放声明并排添加到zoom: 1;父元素上的.block。 expression（动态属性）值适用于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>