不只是在模板修改中会碰到此类问题,在任何的DIV+CSS页面制作中都会碰到。
8 f! Z% _+ j& _6 A! z日前本站长在帮朋友制作ECSHOP模板的时候就遇到了这个兼容性问题。. J' `! y- g4 u1 n
我在最外层的DIV设置了一个 heiht:auto ,里面还有两级 div ,在IE下很正常,最外层的大DIV会随着内部的DIV的高度而变化,但是在火狐下就无效。 " o+ } [8 i! D! \
6 p( n @4 J3 ~$ `$ I+ hFirefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。 例: <div style=" border:2px solid #0CC; width:600px;" >' [7 @) f) F3 @" |" E& z' E
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
5 L* i/ H& b5 x1 ~) j <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>: w: {5 ^ z' T6 V& B
<!-- <div style="clear:both"></div>-->1 F- I2 ?, d) F
</div> 解决方法如下, 1. <div style=" border:2px solid #0CC; width:600px;" >/ c% }3 z$ a& J4 u$ R B6 @
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
) b' \' h5 h! ]4 o <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>- ^# w- \! H& s/ U8 C# h0 j$ M
<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; " >& }! M+ r6 b" R) Q" V+ T
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
/ g6 ~9 J. d* d0 g2 P! Q1 r/ [ <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>
9 O6 c$ E) k1 m+ B</div> 3.今天研究163代码的时候 也发现一种新的解决方法 就是加入一个伪类! <div style=" border:2px solid #0CC; width:600px;" class="clearfix" >
( }3 W. ]% y Y! g' x& I <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>0 r4 s @+ `7 i0 ?8 _( ^9 {
<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>( c* Q3 J5 u. ]" V% s& [3 W# \* N
</div> Css如下: <style> .clearfix:after{context:"."; height:"0"; display:block;clear:both;visibility:hidden} /* Hides from IE-mac \*/
6 ]3 A4 |$ v! ^* html .clearfix {height: 1%;}
* E0 I5 k! c( X* v/* End hide from IE-mac */ </style> 至于这种方法,IE5.5下 对此类并不支持!!
6 d; x- t5 N/ h) a |