css clearfix(针对火狐height:auto无效解决方案)
来源:互联网 发布:windows清理 编辑:程序博客网 时间:2024/06/06 16:25
Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。
例:
<div style=" border:2px solid #0CC; width:600px;" >
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
<div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>
<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
<!-- <div style="clear:both"></div>-->
</div>
解决方法如下,
1.
<div style=" border:2px solid #0CC; width:600px;" >
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
<div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>
<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
<div style="clear:both"></div> </div>
在float:left的Div之后 加入<div style="clear:both"></div> 这样加入的弊端是,JS DOM找节点时会出现了一个多余的节点,这个也是个没用的DIv
2.直接在最大层加入 overflow:hidden; 这也是我用的解决手法!! 简单--
<div style=" border:2px solid #0CC; width:600px;overflow:hidden; " >
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
<div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>
<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
</div>
3.今天研究163代码的时候 也发现一种新的解决方法 就是加入一个伪类!
<div style=" border:2px solid #0CC; width:600px;" class="clearfix" >
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
<div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>
<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
</div>
Css如下:
<style>
.clearfix:after{context:"."; height:"0"; display:block;clear:both;visibility:hidden}
/* Hides from IE-mac /*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
</style>
至于这种方法,IE5.5下 对此类并不支持!!
我个人认为,用清除浮动的方法比较好~
- css clearfix(针对火狐height:auto无效解决方案)
- css clearfix(针对火狐height:auto无效解决方案)
- CSS中height:auto 属性无效
- CSS height=100%无效的解决方案
- 父级div height:auto无效解决办法
- 火狐浏览器设置height为auto 时不兼容
- css height=auto不响应transition
- css height:100%和height:auto的区别
- 针对火狐浏览器支持OCX的解决方案
- CSS--DIV height:100%无效的解决办法
- confirm在火狐中无效的解决方案
- div+css中height:auto !important; height:663px; min-height:663px !important;区别
- css高度auto时背景色无效
- 针对浏览器火狐、ie6、ie7区别使用css
- clearfix css清理浮动
- css 清除浮动 clearfix
- DIV的CSS height:100%无效的解决办法
- DIV的CSS height:100%无效的解决办法
- 设计模式之Visitor(Collection的观点)
- 键盘各键对应的ASCII码值
- 基于OGRE的3D的虚拟场景漫游系统(Visual_WEB3D)
- 我的程序员能力矩阵层次
- 【zz】unaligned transfer
- css clearfix(针对火狐height:auto无效解决方案)
- Silverlight 3 RIA服务编程中异步域操作
- ActiveX中调用JavaScript
- buaa_jsc的专栏
- ABI Specifications 相关链接
- 【zz】将成员函数指针强制转换成void指针
- Windows平台下MYSQL破解root密码(忘记root密码的解决方法)
- IT职场:外企面试官最爱提的问题TOP10
- 爱护动物,保护环境