2013-06-13 207 views
0

我在這個網站上有以下HTML/css簡單代碼www.habitacionalkids.com.ar在Chrome上沒有問題,但是當我在FF或IE上打開它時,我有一個div缺失。我在其他網站上使用非常類似的代碼,工作正常,但我不知道爲什麼不在這裏工作。CSS適用於Chrome,但不適用於FF或IE

CSS

html, body, #wrapper, images { 
    height:100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    background-color:#143d36; 
} 

img { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    display: block; 
    /*display: inline-block;*/ 
} 

.center { 
    width: 800px; 
    height: 600px; 
    position: absolute; 
    left: 50%; 
    margin-left: -400px; 
} 
.center_mini{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 

} 
.center_mini_float{ 
    float:left; 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 

} 

HTML

<div class="center"> 
    <div class="center_mini"> 
     <img src="images/img_01.png" width="800" height="470" alt="bg"> 
    </div> 
    <div class="center_mini"> 
     <div class="center_mini_float"> 
     <img src="images/img_02.png" width="364" height="130" alt="bg"> 
     </div> 
     <div class="center_mini_float"> 
     <div class="center_mini"> 
      <div class="center_mini_float"> 
      <a href="https://www.facebook.com/HabitacionalKids?fref=ts" target="_blank"><img src="images/img_03.png" width="35" height="33" alt="bg"></a> 
      </div> 
      <div class="center_mini_float"> 
      <a href="mailto:[email protected]"><img src="images/img_04.png" width="34" height="33" alt="bg"></a> 
      </div> 
     </div> 
     <div class="center_mini"> 
      <img src="images/img_06.png" width="69" height="97" alt="bg"> 
     </div>    
     </div> 
     <div class="center_mini_float"> 
      <img src="images/img_05.png" width="367" height="130" alt="bg"> 
     </div> 
    </div> 
</div> 

回答

3

看來,缺少DIV只是浮到其兄弟的右邊,而不是在其下方。嘗試添加此:

.center_mini { 
    clear: both; 
} 
2

用於Overflow:hidden;因爲這樣

.center_mini{overflow:hidden;} 

和第二個選項是該

.center_mini:after { 
    clear: both; 
    content: ""; 
    display: table; 
    overflow: hidden; 
} 
0

這將這樣的伎倆爲您服務。將這行代碼添加到您的CSS。

.center_mini img{ 
     float:left; 
} 
相關問題