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

尝试添加display：inline-block;和宽度你希望它能解决你的问题。

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/

最高保证金在IE 8中不起作用

5 个答案: