我对 safari 5 移动图像有疑问。本来我以为只是windows的Safari,但safari 5的全部都完好无损。有下拉菜单的列表项似乎下拉ok,然后列表顶部的img跳到底部列表覆盖底部的两个列表项。
任何人都可以帮忙吗?我已经尽可能多地删除了额外的代码(例如鼠标悬停事件),但问题仍然存在
这是我怀疑野生动物园问题的CSS:
#nav,#nav ul {
font-family:verdana;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#nav {
height:50px;
width: 800px ;
margin-left: auto ;
margin-right: auto ;
overflow:hidden;
top:0;
}
#nav li {
float:left;
position:relative;
z-index:10;
}
#nav li a {
background:url(../images/bg-menu.png) no-repeat center top;
color:#000;
display:block;
float:left;
font-size:14px;
height:51px;
line-height:40px;
padding:0 10px;
position:relative;
text-decoration:none;
z-index:20;
}
/* Left end padding*/
#nav li:first-child a {
background:url(../images/bg-menu.png) no-repeat left top;
padding-left:45px;
}
#nav li ul li:first-child a {
background-image:none;
padding-left:10px;
}
/* Right end padding*/
#nav li.pad {
background:url(../images/bg-menu.png) no-repeat right top;
display:block;
height:51px;
width:15px;
}
#nav ul {
background:#FFFFFF;
height:auto;
padding:10px 0;
position:absolute;
top:-125px;
width:180px;
z-index:-1;
transition:0.8s ease-in-out;
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-ms-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-transition:0.8s ease-in-out;
-ms-transition:0.8s ease-in-out;
-o-transition:0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
width:180px;
}
#nav ul li a {
background:transparent;
height:20px;
line-height:20px;
width:180px;
}
#nav:hover {
height:200px;
}
#nav li:hover ul {
transform:translate(0,161px);
-moz-transform:translate(0,161px); /*some css3*/
-o-transform:translate(0,161px);
-webkit-transform:translate(0,161px);
-ms-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
color:#6d6e71;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 600px;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}