不只是在模板修改中会碰到此类问题，在任何的DIV+CSS页面制作中都会碰到。
9 c. n# r* ^& x4 o( C日前本站长在帮朋友制作ECSHOP模板的时候就遇到了这个兼容性问题。4 ^% n1 e( i/ n9 `, ~
我在最外层的DIV设置了一个 heiht:auto ，里面还有两级 div ，在IE下很正常，最外层的大DIV会随着内部的DIV的高度而变化，但是在火狐下就无效。
4 a5 D, q- Y4 j* A
. w) `; z1 ?$ l- iFirefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。 例： <div style=" border:2px solid #0CC; width:600px;" >
7 j0 X& r3 E/ Q5 F6 Q5 f <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>2 W5 N( C6 y8 y H- G- S8 u* K% s
<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>
6 o8 D& P0 U j) n/ G: ]4 S, A<!-- <div style="clear:both"></div>-->
+ O4 q5 m0 l+ f1 [( X) O( P</div> 解决方法如下， 1. <div style=" border:2px solid #0CC; width:600px;" >
/ c6 _1 _& x3 M6 `4 d1 q- \5 F; I <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
4 d& @0 k1 M9 V0 p; }9 Z <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>
- y7 {# {2 W8 }2 A( A<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; " >0 { J/ Y5 Q' p0 H. I+ X* }. {
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
- D$ f8 I, c, u/ D+ l <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>
" G' k8 B, g1 D/ N" e, n</div> 3.今天研究163代码的时候 也发现一种新的解决方法 就是加入一个伪类！ <div style=" border:2px solid #0CC; width:600px;" class="clearfix" >
8 e! {6 V, u' B ^6 T/ ? <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>2 F3 ]3 e- `# b6 e) U/ f
<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>
' M8 Z" q3 g. r4 \9 @0 h+ f3 A</div> Css如下： <style> .clearfix:after{context:"."; height:"0"; display:block;clear:both;visibility:hidden} /* Hides from IE-mac \*/* G( y- W2 p6 ~% H) @
* html .clearfix {height: 1%;}
( W% j: i' P8 I# ?" H# G+ F/* End hide from IE-mac */ </style> 至于这种方法，IE5.5下 对此类并不支持！！
/ }3 n6 L9 X# C, ~+ r | 
38978
0
©2015-2022 tuyuanma.com 版权所有 Sitemap.xml
开发工具
站长平台
IDC服务商
注册交易
SEO及安全
开放平台
CDN及SSL
源码资源
自媒体平台
图片工具
小程序平台
投资理财
常用工具
友情链接
网络硬盘
赣公网安备36112102000036号
赣ICP备17001544号-10