css图层在其它浏览器是正常的，firefox就不行，图文并茂说明，以便理解,该如何解决
日期：2014-05-17 浏览次数：20527 次
css图层在其它浏览器是正常的，firefox就不行，图文并茂说明，以便理解
上面这个格式在其它浏览器是正常的，可是在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一下就出现空白了。
- 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一下就出现空白了。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
