css - IE7 : Extra space caused by Clearfix container with element `float: right;` and margin

Question

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

您可以在下面的 gif 中看到，当我在 thing 元素上切换 margin-bottom 时，它会切换 thing 之间的空间> 元素和按钮(正常)，但也在按钮和容器末端之间(错误)。

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

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

我使用的是 HTML5 文档类型，但也尝试过严格的文档类型，它在真正的 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

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

但我找到了一个非常有效的解决方案，不幸的是它有点老套。

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

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

来源: NBFC Overflow hack in Better float containment in IE using CSS expressions

---

完整的 Clearfix:

我建议您使用条件样式表而不是 CSS 属性 hacks(*)，但我已将它们保留在其中，这样它很好并且可以复制粘贴。

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