Question

您好我正在尝试将背景图片添加到我的链接中。该图像包含两种状态， A和A：悬停。

a->background-position:bottom和a:hover=>background-position:top。它在chrome和firefox中运行良好，但IE糟透了，显示图像的总高度（两个状态在一起）。我想知道是否有人知道如何解决它。感谢..

HTML

<ul id="menu">

 <li id="dummy"><a href="#"></a></li> 
 <li id="skill"><a href="#"></a></li>

</ul>

我的css

#menu #skill a
{
background-image:url("BTskill.png") ;
background-repeat:no-repeat;
background-position:bottom; 
list-style-type:none ;
display:block;
width:98px;
height:18px;
margin-top:5px;
}



#menu #skill a:hover
{
background-image:url("BTskill.png") ;
background-repeat:no-repeat;
list-style-type:none ;
display:block;
width:98px;
height:18px;
background-position: top;  // the image position would change if user hovers the button
margin-top:5px;

}

更新：我刚刚发现我是否从我的css中取出了

   #menu #skill
    {
    background-image:url("BTskill.png") ;
    background-repeat:no-repeat;
    background-position:bottom; 
    list-style-type:none ;
    display:block;
    width:98px;
    height:18px;
    margin-top:5px;
    }

这张图片会显示正确的高度，但它不再是一个链接.. :( ..男人......我讨厌IE这么吓人......

Answer 1

你不需要所有重复的css作为开始。

尝试：

#menu #skill a
{
background-image: url(BTskill.png);
background-repeat: no-repeat;
background-position: left bottom;
display: block;
width: 98px;
height: 18px;
margin-top: 5px;
}

#menu #skill a:hover
{
    background-position: left top;
}

确保悬停选择器位于css中的非悬停状态之后，您始终可以尝试在末尾添加!important。

还尝试向a提供一些内容，例如 

IE链接背景图像不起作用

1 个答案: