不只是在模板修改中会碰到此类问题，在任何的DIV+CSS页面制作中都会碰到。
' F! A" g; y' ^8 d日前本站长在帮朋友制作ECSHOP模板的时候就遇到了这个兼容性问题。
( O- L) V; y0 P我在最外层的DIV设置了一个 heiht:auto ，里面还有两级 div ，在IE下很正常，最外层的大DIV会随着内部的DIV的高度而变化，但是在火狐下就无效。 ) |0 _4 f2 n' `7 |9 E6 o, W6 w
$ T) q* D- a6 B2 r& w0 J- D
Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。 例： <div style=" border:2px solid #0CC; width:600px;" >
6 L; s5 `4 p6 S, R7 I" v <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
( G/ X& ?; D6 G/ } <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>
( j% s. A8 \& \9 s* P<!-- <div style="clear:both"></div>-->9 }( F' l9 ?% W1 r, U5 s
</div> 解决方法如下， 1. <div style=" border:2px solid #0CC; width:600px;" >: G# O w; q6 o( H
<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>4 ?7 R7 L# p" U% ~5 g
<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 A7 q- S' U+ u% K+ k* I<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; " >
) W! h! p" t* V/ h# d5 }1 b) | <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>5 S2 b, x+ }- ~: P6 s! o- g
<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>
- D& p6 P# {* P</div> 3.今天研究163代码的时候 也发现一种新的解决方法 就是加入一个伪类！ <div style=" border:2px solid #0CC; width:600px;" class="clearfix" >
" i( n7 H, x& ~7 U: a2 b! K <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
# {5 N) E& E, A0 A <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>$ y8 O: W% J- W; f3 }$ w; v- k* [
</div> Css如下： <style> .clearfix:after{context:"."; height:"0"; display:block;clear:both;visibility:hidden} /* Hides from IE-mac \*/
/ V6 R- m) U3 v0 X6 }% k1 b* html .clearfix {height: 1%;}
6 ?* L5 d6 Z5 E v/* End hide from IE-mac */ </style> 至于这种方法，IE5.5下 对此类并不支持！！
- H0 ^2 u9 k' S* f$ m) {2 `9 a | 
39011
0
©2015-2022 tuyuanma.com 版权所有 Sitemap.xml
开发工具
站长平台
IDC服务商
注册交易
SEO及安全
开放平台
CDN及SSL
源码资源
自媒体平台
图片工具
小程序平台
投资理财
常用工具
友情链接
网络硬盘
赣公网安备36112102000036号
赣ICP备17001544号-10