IE7：额外 space 由带有元素“float: right;”和 margin 的 Clearfix 容器引起

Question

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

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

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

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

我正在使用 HTML5 文档类型，但也尝试了严格的文档类型，但它在真正的 IE7 或模拟版本中没有效果。

如何在保持自清micro-clearfixdom结构的同时去除底部多余的space？

下面的 gif 来自 Windows 8.1 IE 和 IE7 emulation/compatibility。这是 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(dynamic 属性) 值适用于 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 溢出攻击

完整的 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>

IE7：额外 space 由带有元素“float: right;”和 margin 的 Clearfix 容器引起

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

html

css

internet-explorer

internet-explorer-7

代码：

完整的 Clearfix：