一个比较完美的spacer div技巧
2005-10-07 09:40
337 查看
一个比较完美的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技巧
- 一个比较完美的spacerdiv技巧
- VCenterEdit一个比较完美的文本垂直居中的CEdit类(和改进)
- 看了网上的大多防SQL攻击程序,自己编写了一个函数,比较完美。大家一起测测~
- 一个有意思的C++泛型比较技巧文章
- 自己写了一个js,但是最终不能控制住最后后的提交,前面的还是比较完美,大家看到后,能帮我解决一下吗?
- 编写一个比较完美的equals方法的建议(java)
- 一个比较完整的Div模拟对话框(ZZ)
- 一个基于Ogre,适合2.5D游戏比较完美的阴影解决方案
- 比较漂亮的一个导航条的效果DIV+CSS
- 一个比较纯洁的DIV+CSS下拉菜单
- Java面试题 写一个比较完美的JDBC 连接数据库的程序
- 记录一个Word操作技巧,很偏门的,鉴于Google很不方便用了,百度起来比较费劲所以记录一下
- lightoj 1018 一个比较重要的状态转移的剪枝技巧....DFS+状压dp
- Qt技巧:Win7下打包发布Qt程序(解释的比较清楚,把exe和dll伪装合并成一个文件)
- 一个完美的Div+CSS三列浮动布局代码
- 今天我对公司的WEB系统终于有了一个比较完美的交代!
- 分享一个DIV的css3艺术...因为打开比较慢所以无耻的放到自己的服务器了
- 比较漂亮的一个导航条的效果DIV+CSS