一个比较完美的spacer div技巧
来源:互联网 发布:取消端口mac绑定 编辑:程序博客网 时间:2024/05/18 19:23
一个比较完美的spacer div技巧
A wonderful "spacer div" trick
为了解决浮动元素引起父元素无法获得高度的问题,我们一般在子元素的最后加上一个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指出的规则显示。
由此,一个相对完美的Spacer Div就产生了^_^
- 一个比较完美的spacer div技巧
- 一个比较完美的spacer div技巧
- JS日期比较的一个小技巧
- 【小技巧】创建一个宽高成比例的弹性div盒子
- 比较完美的SqlHelper类
- 一个有意思的C++泛型比较技巧文章
- VCenterEdit一个比较完美的文本垂直居中的CEdit类(和改进)
- 网页中支持浏览器比较完美的一个播放器例子
- 一个基于Ogre,适合2.5D游戏比较完美的阴影解决方案
- java web js完美分页,只需一个div
- 比较完美的清除浮动的方法
- DIV与TABLE的比较
- table和div的比较
- table和div的比较
- 一个完美的导航树
- 一个完美的SqlHelper.cs
- 比较完美的图片验证码
- ajax form 比较完美的应用
- 什么是真正学会C++语言
- workflow的两个问题解决
- OSWorkFlow的总结
- [OSWorkflow]OSWorkflow 探索(转载)
- 时间 空间 效率
- 一个比较完美的spacer div技巧
- 动态CSS,换肤技术
- 一个简单的文本编辑器。(是在DEV C++下写的)
- /*************** C内嵌汇编示例 ***************/
- 如何给键盘加锁
- VNC settings for Linux
- 如何将十六进制数转换为十进制数
- 很酷的火焰
- new操作符的使用问题[ask in smth]