css - 上余白が 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;
}

ここにjsFiddleがあります

Answer 1

これは IE8 の既知のバグです。それを修正するにはいくつかの方法があります。

overflow:autoクリアリングに追加してみることができます<div>

このフィドルをチェックしてください

Answer 2

display:inline-block; を追加してみてください。あなたが望む幅と幅は、それがあなたの問題を解決することを願っています。

Answer 3

これを試して：

<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/

Answer 4

<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 5

私のために働きます。

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;
}