上邊距不IE 8工作

Question

<div class="btns" id="btnHome">HOME</div> 
<div class="btns" id="btnCon">CONTACT</div> 
<div style="clear:both;"></div> 
<div id="gall"></div> 

CSS

.btns{ 
    float:left; 
    padding: 2px 10px 2px 10px; 
} 
#gall{ 
    margin:25px 0 15px; // this top margin doesn't work in IE8 
    height:70px; 
    border:thin solid red; 
} 

here is jsFiddle

Answer 1

這是一個known bug in IE8。有幾種方法可以解決它。

你可以嘗試添加overflow:auto到結算<div>

入住這fiddle

Answer 2

嘗試添加顯示：內聯塊;和寬度多少你希望它會解決你的問題。

Answer 3

<div class="btns" id="btnHome">HOME</div> 
<div class="btns" id="btnCon">CONTACT</div> 
<div style="clear:both;"></div> 
&nbsp; <!-- Adding &nbsp; will solve problem --> 
<div id="gall"></div> 

Answer 4

適合我。

http://jsfiddle.net/68myJ/13/

<div class="btns" id="btnHome">HOME</div> 
<div class="btns" id="btnCon">CONTACT</div> 
<div style="clear:both;"></div> 
<div id="gall"></div> 

.btns{ 
    float:left; 
    padding:2px 10px 2px 10px; 
} 

#gall{ 
    margin:25px 0 15px !important; 
    height:70px; 
    width:100%; 
    display:block; /* can revert inline block when long list for IE8*/ 
    border:thin solid red; 
} 

Answer 5

試試這個：

<div id="wrapper"> 
    <div class="btns" id="btnHome">HOME</div> 
    <div class="btns" id="btnCon">CONTACT</div> 
</div> 


<div id="gall"></div> 
​ 

#wrapper{ 
    overflow:hidden; 
} 
.btns{ 
    float:left; 
    padding:2px 10px 2px 10px; 
} 

#gall{ 
    margin:25px 0 15px !important; 
    height:70px; 
    width:100%; 
    display:block; /* can revert inline block when long list for IE8*/ 
    border:thin solid red; 
} 

看到小提琴：http://jsfiddle.net/68myJ/17/