div清除后IE中额外的垂直空间 [英] extra vertical space in IE after div clear
问题描述
这在Firefox中可以正常工作，但是，但在IE中，我在行之间获得了额外的垂直空间。我试图应用clearfix方法，但我必须做错事。
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.
为什么IE插入额外的垂直空间，我该如何摆脱它？
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.
Why does IE insert the extra vertical space and how can I get rid of it?< div class =colorChipstyle =background：rgb（190,250,113）>< / div>
< div class =clear>< / div>
< div class =colorChip clearfixstyle =background：rgb（187,170,128）>< / div>
< div class =colorChipstyle =background：rgb（215,197,154）>< / div>
< div class =colorChipstyle =background：rgb（243,225,181）>< / div>
< div class =clear>< / div>
< div class =colorChip clearfixstyle =background：rgb（104,94,68）>< / div>
< div class =colorChipstyle =background：rgb（129,118,92）>< / div>
< div class =colorChipstyle =background：rgb（155,144,116）>< / div>
< div class =clear>< / div>
< / body>
< / html>
<!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>
推荐答案
IE有点有趣关于空< div> s - 它喜欢给它们一行文本的高度。
IE is a bit funny about empty <div>s - it likes to give them the height of a line of text.
如果将 .clear 更改为1像素：
If you change .clear to this, it'll shrink to 1 pixel:
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
放置背景颜色以查看发生了什么
Put a background colour on to see what's happening
这篇关于div清除后IE中额外的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
