一个比较完美的spacer div技巧

日期：2013-12-09  来源：攀枝花惠康网络公司

在建造网页的过程中，自顺应问题是经常碰着，而又最让人头疼的，看了良多若干好多种解决的体例，可是都不是万能的。今天碰着这个问题，其实让我挠头，借鉴了Shark的体例，又给了我一个新思绪。那时没细心看LBS的样式表，今天才发现，.clear用的就是这个体例。接下来，我会做个关于“自顺应高度”问题的汇总，以便此后碰着问题时辰更快解决。

为体味决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。可是IE和Mozilla对div的诠释分歧引起一些默示上的差异。

最简单的Spacer：

.HackBox{clear:both;}

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

border-top:1px solid transparent;

IE可以正确地发生预期的效不美观，可是在Mozilla中不起浸染。所以此刻良多人是这媚暌姑的

然后XHTML中插手一个 ；，如下：

<div class=”HackBox”> </div>

}

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

经由N次尝试，我发现用下面的体例能斗劲完美的解决这个问题。

.HackBox{

border-top:1px solid transparent !important;

margin-top:-1px !important;

border-top:0;

这回IE和Mozilla都起浸染了，可是IE并不认 height:0;　这个轨则，结不美观IE中的这个Spacer Div就占了必然的高度，影响结构。

margin-top:0;

clear:both;

visibility:hidden;

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

margin-top:-1px;

第一条轨则发生1px的一个透明的上边框，第二条将margin-top设置为-1，以抵消这条边框对结构发生的影响。

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

原文出自己http://www.sharkui.com/articles/article.php?id=1