一个比较完美的spacer div技巧

一个比较完美的spacer div技巧

A wonderful "spacer div" trick

　　为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。

　　最简单的Spacer：

.HackBox{clear:both;}

　　IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的

.HackBox{ height:0; clear:both;}

　　然后XHTML中加入一个&nbsp；，如下：

<div class="HackBox">&nbsp;</div>

　　这回IE和Mozilla都起作用了，但是IE并不认 height:0;　这个规则，结果IE中的这个Spacer Div就占了一定的高度，影响布局。

　　经过N次实验，我发现用下面的方法能比较完美的解决这个问题。

.HackBox{
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}

　　其实IE只需要有clear:both;这一条就可以实现我们的要求。那么下面这两条规则有什么用呢？

border-top:1px solid transparent;
margin-top:-1px;

　　第一条规则产生1px的一个透明的上边框，第二条将margin-top设置为-1，以抵消这条边框对布局产生的影响。

　　但是不幸的是IE不支持transparent这个值，它会将这条边框变为黑色-_-

　　不幸中的万幸是IE这小子还有一个不支持的值，就是!important，IE会忽略这它而选择按后面两条显示，结果就是不显示边框（也就是只有clear:both;起作用了）。而Mozilla却会按!important指出的规则显示。

　　由此，一个相对完美的Spacer Div就产生了^_^