Html 清除 div 后 IE 中的额外垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/473143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
extra vertical space in IE after div clear
提问by lajos
I have created a simple grid of divs by left floating them and an empty div with a clear at the end of each row.
我创建了一个简单的 div 网格，方法是将它们左浮动，并在每行的末尾创建一个带有 clear 的空 div。
This works fine in Firefox, but in IE I get extra vertical space between rows. I tried to apply the "clearfix" method, but I must be doing something wrong.
这在 Firefox 中工作正常，但在 IE 中，我在行之间获得了额外的垂直空间。我试图应用“clearfix”方法，但我一定是做错了什么。
Why does IE insert the extra vertical space and how can I get rid of it?
为什么 IE 会插入额外的垂直空间，我该如何摆脱它？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
root {
display: block;
}
body {
background: white;
}
.colorChip {
position:relative;
float: left;
width: 20px;
height: 20px;
margin: 2px;
border-style: solid;
border-width: 1px;
border-color: black;
}
.clear {
clear: both;
}
.clearfix {
display:inline-block;
}
.clearfix:after, .container:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
</style>
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
</style>
<![endif]-->
</head>
<body>
<div class="colorChip clearfix" style="background: rgb(163,143,88)"></div>
<div class="colorChip" style="background: rgb(190,170,113)"></div>
<div class="colorChip" style="background: rgb(190,250,113)"></div>
<div class="clear"></div>
<div class="colorChip clearfix" style="background: rgb(187,170,128)"></div>
<div class="colorChip" style="background: rgb(215,197,154)"></div>
<div class="colorChip" style="background: rgb(243,225,181)"></div>
<div class="clear"></div>
<div class="colorChip clearfix" style="background: rgb(104,94,68)"></div>
<div class="colorChip" style="background: rgb(129,118,92)"></div>
<div class="colorChip" style="background: rgb(155,144,116)"></div>
<div class="clear"></div>
</body>
</html>
回答by Greg
IE is a bit funnyabout empty <div>s - it likes to give them the height of a line of text.
IE对空s有点好笑<div>——它喜欢给他们一行文本的高度。
If you change .clearto this, it'll shrink to 1 pixel:
如果你改成.clear这个，它会缩小到 1 像素：
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
Put a background colour on to see what's happening
设置背景色以查看发生了什么
回答by lajos
.clear {
clear: both;
height: 0px;
overflow: hidden;
}
Changing it to 0px works better..
将其更改为 0px 效果更好..
回答by Polygon
Without it it works in IE6, but not IE7, with it it works in IE7, but adds height in IE6. There is not word to describe my hatred towards this browser.
没有它它可以在 IE6 中运行，但不能在 IE7 中运行，它可以在 IE7 中运行，但在 IE6 中增加了高度。没有文字可以描述我对这个浏览器的仇恨。
回答by bmarti44
The height: 0px did not work for me in IE 8. Also, I did not want a height of 1px, because then there would be a 1px white line across my div with a grey background, and I didn't want to set a special background color for every instance of a class="clear" div. I tried line-height: 0; and it worked great in IE8, IE7, and IE6 (I don't care about anything older than that) and FF 3.6, no additonal vertical space was added.
height: 0px 在 IE 8 中对我不起作用。另外，我不想要 1px 的高度，因为那样我的 div 上会有一条 1px 的白线，背景为灰色，我不想设置class="clear" div 的每个实例的特殊背景颜色。我试过 line-height: 0; 它在 IE8、IE7 和 IE6（我不关心比这更旧的东西）和 FF 3.6 中运行良好，没有添加额外的垂直空间。
.clear {
clear: both;
line-height: 0;
overflow: hidden;
}
回答by bmarti44
I had this issue with ie8 and used following
我在 ie8 上遇到了这个问题并使用了以下内容
.clear
{
clear:both;
height:0;
width:0;
margin:0;
padding:0;
line-height:0;
overflow: hidden;
font-size:0px;
}
