[英]CSS works on Chrome but not on FF nor IE
我在chrome上的網站www.habitacionalkids.com.ar上有以下HTML / css簡單代碼,沒有問題,但是當我在FF或IE上打開它時,缺少一個div。 我在其他網站上使用的代碼非常相似,但效果很好,但我不知道為什么在這里不起作用。
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:hola@habitacionalkids.com.ar"><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>
似乎缺少的div只是浮動在其同級的右側,而不是在其下方。 嘗試添加以下內容:
.center_mini {
clear: both;
}
用來Overflow:hidden;
像這樣
.center_mini{overflow:hidden;}
第二個選擇是
.center_mini:after {
clear: both;
content: "";
display: table;
overflow: hidden;
}
這將為您解決問題。 將這行代碼添加到您的CSS中。
.center_mini img{
float:left;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.