Question

我在这里有一个导航栏的代码。当我将鼠标悬停在链接上时，一个png图像的小箭头应显示在中间的下方。以下代码在Firefox和Chrome中运行良好，但在IE中，箭头略低于div，因此只能看到它的一部分。有什么问题？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">


</head>
<body>

<div id="wrapper">
<div id="logo-wrapper">
<a href="#"><img src="logo.png" id="logo"></a>

</div> 
<div id="menu-wrapper">
<ul>
<li><a id="home" href="#"  >Home</a></li>
        <li><a href="#" >Work</a></li>
        <li><a href="#" >Us</a></li>
        <li><a href="#" >Contact</a></li>
    </ul>
</div>
</div>

下面是CSS：

body,html{
    border:0px;
    padding:0px;
    margin:0px;
}

#wrapper{
    width:954px;
    height:59px;
    padding-top:0px;
    padding-right:20px;
    padding-bottom:0px;
    padding-left:15px;
    margin:0 auto;
    border-style:none;
    outline:none;
    background-color:black;
    position:relative;

}

#logo{
padding:0px;
margin:none;
outline:none;
height:59px;

}
#logo-wrapper{
 width:223px;
 float:left;
 padding:0px;
 margin:none;
}

#menu-wrapper{
padding:0px;
margin:none;
position:absolute;
bottom:6%;
right:30px;
}

ul{
    width:200px;
    position:relative;
    left:0;
    bottom:-5px;
    list-style-type:none;
    padding:0px;
    margin:none;
}
li{
    margin:0px;
    padding:0px;
    display:inline;
    width:20%;
    text-align:center;

}
#home{
margin:0px;
padding:none;
background: url('arrow.png') center 100% no-repeat;
}

#menu-wrapper a{

height:31px;
padding-bottom:16px;
text-decoration:none;
font-family:"arial";
font-weight:bold;
font-size:12px;
color:white;
margin-right:13px;
margin-bottom:0px;
border:none;
}
#menu-wrapper a:hover{
padding:none;
margin:0px;
outline:none;
border:none;
background: url('arrow.png') center 100% no-repeat;
}
#menu-wrapper a:active{
outline:none;
margin:0px;
border:none;
}
#menu-wrapper a:focus{
outline:none;
margin:0px;
border:none;
}

Answer 1

您可以尝试在箭头图像中添加z-index。

像这样：

#logo{
padding:0px;
margin:none;
outline:none;
height:59px;
z-index: 9999;
}

编辑。 z-index

中的所有图片#logo-wrapper

#menu-wrapper img{
z-index: 9999;
}

箭头在div边界下方略微（高于1 px）

1 个答案: