ff | ICOjump - 交互设计是衔接用户与产品的工具

[今天FF下碰到的问题]z-index, overflow,positiion

2007年08月14日

HTML代码

<style>
ul{
list-style-type:none;
}
#case{
width:930px;
overflow:hidden;
margin:0px auto;
}
#case ul{
width:920px;
overflow:hidden;
margin:20px auto;
}
#case img{
border:0px;
}
#case li ,#case li a{
float:left;
width:81px;
height:81px;
margin:0px 10px 10px 0px;
background-color:#B2B2B2;
overflow:hidden;
}
#case li a:hover{
border:2px solid #E4F314;
background-color:#B2B2B2;
width:120px;
height:120px;
position:absolute;
margin:-20px 0px 0px -20px !important;
margin:-20px 0px 0px -110px;
}
</style>

<div id="case">

<ul>

<li><a href="#"><img src="attachments/month_0708/22007814163246.gif" alt=""  /></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这段代码在FF下运行，图片会在黑色背景下面
解决方法：#case li:hover{overflow:visible;} 另外有2篇关于这个方面的文章：
http://bbs.blueidea.com/thread-2778532-1-1.html
http://bbs.blueidea.com/thread-2777105-1-3.html

]]>

0个评论标签: css , ff