J2SE Java基础 J2EE 设计模式 struts hibernate spring freemarker ibatis xml xslt Javascript mysql Linux 系统架构
Java高级 webwork webservice 网页制作 oracle sql server 数据库基础 软件工程 网站建设 SEO 黑客基础 名人堂 Ruby
首页 > 技术文档 > 网页制作 > xhtml css > 一个比较完美的spacer div技巧

一个比较完美的spacer div技巧

作者:  来源:  标签:css div clean (English)

  为了解决浮动元素引起父元素无法获得高度的问题,我们一般在子元素的最后加上一个Spacer Div(clear:both)。但是IE和Mozilla对div的解释不同引起一些表现上的差异。

  最简单的Spacer:

.HackBox{clear:both;}

  IE可以正确地产生预期的效果,但是在Mozilla中不起作用。所以现在很多人是这么用的

.HackBox{ height:0; clear:both;}

  然后XHTML中加入一个 ,如下:

<div class="HackBox">&nbsp;</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指出的规则显示。


相关文章
(2007年05月25日)Firefox与IE在CSS样式中的差异
(2007年04月12日)Div+CSS布局入门教程
(2007年05月25日)完美兼容IE6/IE7/FF的通用方法
(2007年06月29日)玩转表单
(2007年05月25日)IE6/IE7和Firefox对Div处理的差异

评论列表

发表评论

赞助商