一个比较完美的spacer div技巧

作者:by0001 来源:蓝色理想 时间:2009-03-18 19:29:00 

在制作网页的过程中,自适应问题是经常遇到,而又最让人头疼的,看了好多种解决的方法,但是都不是万能的。今天遇到这个问题,实在让我挠头,借鉴了 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{
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指出的规则显示。

标签:css,spacer,div,自适应,技巧
0
投稿

猜你喜欢

  • 为你的ASP程序作一个负载测试

    2008-10-23 13:48:00
  • mysql 获取表有多少列

    2010-10-14 13:44:00
  • asp如何直接调用Excel数据?

    2010-06-28 18:26:00
  • 轻松接触SQL Server 2000实例的命名规则

    2009-01-23 13:44:00
  • asp 删除数据库记录的代码

    2011-02-05 10:39:00
  • 网页设计者应当注意九大要点

    2007-08-10 13:30:00
  • Firefox 3.6新功能预览

    2009-12-01 14:23:00
  • asp单主键高效通用分页存储过程

    2009-02-23 19:21:00
  • OraclePL/SQL单行函数和组函数详解

    2010-07-28 13:02:00
  • asp什么情况下用响应缓冲会提高运行速度?

    2010-07-14 21:02:00
  • 月影:function扩展

    2008-05-19 12:27:00
  • mysql出现10061错误解决办法

    2010-07-04 13:36:00
  • CSS自适应宽度圆角按钮

    2007-11-20 11:38:00
  • MySql数据库基本命令集会

    2011-08-05 18:43:23
  • 网站的视觉设计

    2008-08-15 12:58:00
  • oracle应用程序实现打包 的方法

    2009-03-02 10:32:00
  • 基于关系型数据库引擎的\\XML\\索引技术

    2008-09-05 17:13:00
  • 全国哀悼日 建议站点换素装(附代码)

    2008-05-19 12:05:00
  • 什么是XSLT,什么是XPath

    2008-01-21 13:12:00
  • 用YSlow评分插件分析我们页面

    2008-08-26 11:48:00
  • asp之家 网络编程 m.aspxhome.com