ecshop模板css兼容问题_height:auto火狐下无效的解决方法

只是在模板修改中会碰到此类问题，在任何的DIV+CSS页面制作中都会碰到。在帮朋友制作ECSHOP模板的时候就遇到了这个兼容问题。
我在最外层的DIV设置了一个 heiht:auto ，里面还有两级 div ，在IE下很正常，最外层的大DIV会随着内部的DIV的高度而变化，但是在火狐下就无效。
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下 对此类并不支持！！

本文标签：

声明：本文由代码号注册/游客用户【彤梁】供稿发布，本站不对用户发布的ecshop模板css兼容问题_height:auto火狐下无效的解决方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：彤梁» /dmh/11446.html

很赞哦！ ()