一个比较完美的spacer div技巧
作者:by0001 来源:蓝色理想 发布时间:2009-03-18 19:29:00
标签:css,spacer,div,自适应,技巧
在制作网页的过程中,自适应问题是经常遇到,而又最让人头疼的,看了好多种解决的方法,但是都不是万能的。今天遇到这个问题,实在让我挠头,借鉴了 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指出的规则显示。
0
投稿
猜你喜欢
- 当你在IE中点击一个Realplayer连接时,系统会自动启动Realplayer软件,不仅占用系统内存,而且在上网时Realplayer容
- 用了on error resume next则在这句往后的代码就算出错也会继续执行具体有没有错可以用err.number来判断err.num
- 代码如下:<% Function Bytes2bStr(vin,cSet) Dim BytesStream,StringReturn
- 问题:我想每日从数据库里导出一些数据,内容基本上都是一样的,只是时间不同,比如导出一张表wjzcreate table wjz(id int
- 现在很多朋友都不止一个账户,不止一个密码。忘记账户名、密码,或账户名、密码输入错误也就难免啦。每当这个时候,你是否和我一样会有小小的焦虑产生
- 两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”,圆角因使人感觉舒适的
- 很多网站都有“浏览历史”这个功能,通常都是显示在页面的一侧,特别是一些购物网站,这个功能会让用户使用网站的体验好一些;例如当当网或淘宝网都有
- 一、避免Firefox 背景图不显示的兼容问题,定义background 属性,先后顺序不能随意变动。background : backgr
- 按照惯例,年底的淘宝的确是到了“需要改版的时候”。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少
- 以前大家谈了很多有关打开数据库连接安全的问题,现在我再提出一种思路:使用activex dll来保护你的代码。(既可以不用为使用共享的加密软
- 作用: 构建一些简单的SQL语句,结合在提交表单时使用,可以较方便<%@LANGUAGE="VBSCRIPT&
- 用比较笨的方法来做abc ="AlkjA;lkjlkjAlkAkjAlkjAAAA" if instr(abc,&quo
- prototype框架最早是出于方便Ruby开发人员进行JavaScript开发所构建的,从这个版本上更加体现的淋漓尽致。比起1.3.1版本
- 作为入门者来说,了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线
- 这个问题对于规模稍微大些的项目而言,显得尤其重要了,数据库中如果有几百个存储过程, 难道还一个个找不成,即使自己很了解业务和系统,时间长了,
- 生成静态页的方法有很多种,我比较喜欢用xmlhttp的方法生成,因为我不用考虑很多东西,我只要把动态的asp页面编写好就行了。<% s
- 内容摘要:ASP与存储过程(Stored Procedures)的文章不少,但是我怀疑作者们是否真正实践过。我在初学时查阅过大量相
- 以下列出了两种数据库的方法:ASP+Access20001.要获取的ID值字段属性必须设为:自动编号(我们假设字段名为recordID)2.
- 由于代码比较短,这里就不进行注释了代码如下:<% '当目标页面的包含文件即#include的页面里边存在respon
- 有四个变量影响磁带备份设备的性能,并使 SQL Server 备份及还原性能操作得以在大体上随添加更多磁带设备而提高线性比例。◆软件数据块大