不只是在模板修改中會(huì)碰到此類問題，在任何的DIV+CSS頁面制作中都會(huì)碰到。

日前本站長(zhǎng)在幫朋友制作ecshop模板的時(shí)候就遇到了這個(gè)兼容性問題。

我在最外層的DIV設(shè)置了一個(gè) heiht:auto ，里面還有兩級(jí) div ，在IE下很正常，最外層的大DIV會(huì)隨著內(nèi)部的DIV的高度而變化，但是在火狐下就無效。

Firefox等符合W3C標(biāo)準(zhǔn)的瀏覽器中，如果有一個(gè)DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因?yàn)閮?nèi)部沒有clear，導(dǎo)致不能被撐開。

例：

<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找節(jié)點(diǎn)時(shí)會(huì)出現(xiàn)了一個(gè)多余的節(jié)點(diǎn)，這個(gè)也是個(gè)沒用的DIv

2.直接在最大層加入 overflow:hidden; 這也是我用的解決手法！！ 簡(jiǎn)單--

<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代碼的時(shí)候 也發(fā)現(xiàn)一種新的解決方法 就是加入一個(gè)偽類！

<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下 對(duì)此類并不支持！！