上边距不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/