.clear方法解决网页自适应高度的问题
在制作网页的过程中,自适应问题是经常遇到,而又最让人头疼的,看了好多种解决的方法,但是都不是万能的。今天遇到这个问题,实在让我挠头,借鉴了 Shark的方法,又给了我一个新思路。当时没仔细看LBS的样式表,今天才发现,.clear用的就是这个方法。接下来,我会做个关于“自适应高度”问题的汇总,以便今后遇到问题时候更快解决。 为了解决浮动元素引起父元素无法获得高度的问题,我们一般在子元素的最后加上一个Spacer Div(clear:both)。但是IE和Mozilla对div的解释不同引起一些表现上的差异。 最简单的Spacer: .HackBox{clear:both;} IE可以正确地产生预期的效果,但是在Mozilla中不起作用。所以现在很多人是这么用的 .HackBox{ height:0; clear:both;} 然后XHTML中加入一个 ;,如下: 这回IE和Mozilla都起作用了,但是IE并不认 height:0; 这个规则,结果IE中的这个Spacer Div就占了一定的高度,影响布局。 经过N次实验,我发现用下面的方法能比较完美的解决这个问题。 .HackBox{ 其实IE只需要有clear:both;这一条就可以实现我们的要求。那么下面这两条规则有什么用呢? border-top:1px solid transparent; 第一条规则产生1px的一个透明的上边框,第二条将margin-top设置为-1,以抵消这条边框对布局产生的影响。 但是不幸的是IE不支持transparent这个值,它会将这条边框变为黑色-_- 不幸中的万幸是IE这小子还有一个不支持的值,就是!important,IE会忽略这它而选择按后面两条显示,结果就是不显示边框(也就是只有clear:both;起作用了)。而Mozilla却会按!important指出的规则显示。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |