一个比较完美的spacer div技巧

A wonderful "spacer div" trick

vitamind    E-Mail - Homepage - 2006-02-05 14:15:06

曾经用这个[ <div style="font: 0px/0px sans-serif;clear: both;display: block; height:1px;"></div> ]，就是出现有1OPX高的问题，现在解决了！谢谢

cao888    E-Mail - Homepage - 2005-11-07 02:21:11

去了&nbsp; 直接使用clear:both不就可以了吗,

kikids    E-Mail - Homepage - 2005-07-06 11:00:41

Thanks for your article! 解决了我一直以来想要解决却不能解决的问题!非常感谢.

old9    E-Mail - Homepage - 2005-05-31 06:30:22

记得PIE上面有一个完美的解决方案，不需要添加额外的html标签。因为毕竟这个.HackBox是没有语义的纯粹用来实现布局的元素。 一切正常布局，然后css写一个这个类： .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ 然后给父元素应用这个clearfix类就ok了。

路过    E-Mail - Homepage - 2005-05-30 17:31:23

给父元素加边框可以解决一些诸如背景渲染方面的问题，应该也是解决了高度方面的一些问题的原因。

Shark    E-Mail - Homepage - 2005-05-30 11:16:12

这个无语义的Hack技巧是使用CSS布局无法回避的，有使用Javascript起做类似工作的方法，但比较麻烦……

路过    E-Mail - Homepage - 2005-05-30 09:28:37

这样不是就无法实现图文环绕了么？而且一个问题是增加了无语义的内容。

Shark    E-Mail - Homepage - 2005-05-18 13:15:29

SOMY，非常感谢你这么认真地看俺的文章……这篇文章写了有近一年，现在回头去看还是有不少可以改进的地方。首先nbsp是不用加的。第二，border为了在IE5下某些特定的情况也能正常工作（一时找不到例子，下次再看到可以重现现场的例子我会补充进去）。第三，一个最简单的clear:both就可以在“现代”浏览器中很好的工作。第四，我测试的时候没有发现空白行，可以的话把你的测试代码贴一下，谢谢：）

SOMY    E-Mail - Homepage - 2005-05-17 21:07:35

请问： "IE可以正确地产生预期的效果"是不是在div中不加上&nbsp;的情况下？（测试发现加上&nbsp;依然会有空行） 2.文章的目的是为了让父元素自适应高度并且在此基础上使得spacer div高度为0,请问为什么还要显示border并且消除border？（不好意思，我并没有看懂您的解释……） 3.我用您的代码并没有得到预期的效果，空白行依旧存在，于是我去掉了所有规则只留了clear:both这一条，并且把spacer div中的&nbsp;去掉了，结果在ie和mozilla下均显示正常，请问这是因为浏览器版本较高所以没有出现您所说的"IE和Mozilla对div的解释不同引起一些表现上的差异"现象？ #回复万分感谢！