css图层在其它浏览器是正常的,firefox就不行,图文并茂说明,以便理解
- CSS code
<style> #picbox div{ width: 120px; float: left; height: 120px; display: table; text-align: center; border: solid 1px #C5C5C5; margin: 7px; position:fixed;}#picbox div a{ position: absolute; right: 1px; bottom: 1px;}#picbox div > img{ position:absolute; top:0px; left:0px; }#picbox div span{ display: table-cell; vertical-align: middle;}#picbox div span img{ max-height: 110px; max-width: 110px;}</style><div id="picbox"><div> <span> <img src="http://pica.nipic.com/2007-12-24/20071224161811448_2.jpg"> </span> <img src="/Clt/picmanage/ui/images/checked.png"> <a href="http://pica.nipic.com/2007-12-24/20071224161811448_2.jpg" class="thickbox"> <img src="/Clt/picmanage/ui/images/onebit_02.png" title="查看原图" width="15px"> </a></div></div>
上面这个格式在其它浏览器是正常的,可是在firefox就不行了,看下面的图片:
这个是正常的
这个是firefox下的
[解决办法]
你定位没定好
#picbox div { position:relative;}
你加个这个看看!!
[解决办法]
display:table-cell;
vertical-align:top;
position:relative;
[解决办法]
#picbox div
{
width: 120px;
float: left;
height: 120px;
display: table;
text-align: center;
border: solid 1px #C5C5C5;
margin: 7px;
position:fixed;
}
这个里面有个display:table;去掉他 换种布局方式。这种没必要变成表格吧。一般padding一下就出现空白了。