div兼容底部距离高度问题
先来看下图:
CSS中设置各图片按钮margin:0px 8px 5px 0px;在IE 8中就有效果距离5px,但在IE6与IE7中就没有效果了,那怎么办呢?那就是在三个图片按钮的外层DIV设置padding-bottom:5px;margin-bottom:5px; 一定要设置这两项,少了其中一项在IE6与IE7都不会有效果,css在各浏览器兼容还真是个问题,下面是源码:
HTML代码:
<div class="diggBody">
<a href="#digg" title="投票: ">
<div class="diggclick">
<div style="border:1px solid #40A300;width:50px;height:5px;float:left;"><img src="/images/diggLine.gif" height="5" width="30%" border="0" /></div><span>30%(3000)</span>
</div>
</a>
<a href="#offdigg">
<div class="offclick">
<div style="border:1px solid #555555;width:50px;height:5px;float:left"><img src="/images/offLine.gif" height="5" width="60%" border="0" /></div><span>30%(3000)</span>
</div>
</a>
<div class="favclick">立即</div>
</div>
css:
.diggBody{
padding-left:115px;
padding-bottom:5px;
margin-bottom:5px;
}
.diggBody span{font-size:9px;}
.diggclick{
text-align:left;
float:left;
background:url(../diggnum.gif);
width:160px;
height:20px;
padding:28px 0px 0px 10px;
margin:0px 8px 5px 0px;
}
.offclick{
text-align:left;
float:left;
background:url(../offnum.gif);
width:160px;
height:20px;
padding:28px 0px 0px 10px;
margin:0px 8px 5px 0px;
}
.favclick{
text-align:left;
float:left;
background:url(../favnum.gif);
width:100px;
height:20px;
padding:28px 0px 0px 30px;
margin:0px 8px 5px 0px;
}