我在 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>
最佳答案
我没有找到解释或其他人遇到同样的问题。
但我找到了一个非常有效的解决方案,不幸的是它有点老套。
将此缩放声明并排添加到 .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>
关于css - IE7 : Extra space caused by Clearfix container with element `float: right;` and margin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27758068/