ChinaITLab收集整理 
2005-9-23 
|
在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。 为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。 最简单的Spacer： .HackBox{clear:both;} IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的 .HackBox{ height:0; clear:both;} 然后XHTML中加入一个 ；，如下： <div class="HackBox"> </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指出的规则显示。 | |
 相关文章 |
热门文章 |
|
| WEB2.0到底是什么东东？三点来理解它！ 数据库技巧之Dephi的DLL技巧汇集 eXtremeDB内存式实时数据库的简介 PB程序之间是怎样传递字符串变量？ 为什么Access会报错：显示密码无效？ Power Builder中数据窗口技巧十则 浅议C语言中数组和指针的相互操作 疑难解答之ACCESS的数据极限 PB中可以动态创建浏览器的OLE对象 数据库前端开发:PB数据库表结构的技巧 |
| 文章评论 | |||