导航项目在Firefox中无法正确显示

Question

我在this site导航栏中使用树叶作为项目的背景图片。所有在Chrome和Safari中看起来都很好，但在Firefox中，三个叶子在x轴上的不同位置渲染，如下图所示：

呈现在正确位置的唯一叶子是“关于我”叶子。 'home'叶子比它应该低约20px，并且'contact'叶子比5px低。我想知道是否有人能发现为什么会这样？

叶子和CSS的html如下：

HTML

<nav>
    <a href="/index.html" id="home"><img class='hoverImg_normal' src='images/bodhi-leaf-brown.png'/><img class='hoverImg_highlight' src='images/bodhi-leaf-green.png'/><img class='text home' src='images/home.png'/></a>
    <a href="about.html" id="about"><img class='hoverImg_normal' src='images/bodhi-leaf-brown.png'/><img class='hoverImg_highlight' src='images/bodhi-leaf-green.png'/><img class='text about' src='images/about.png'/></a>
    <a href="contact.html" id="contact"><img class='hoverImg_normal' src='images/bodhi-leaf-brown.png'/><img class='hoverImg_highlight' src='images/bodhi-leaf-green.png'/><img class='text' src='images/contact.png'/></a>
</nav>

CSS

nav{
    text-align:center;
    height:170px;
}
nav a{
    width:115px;
    height:170px;
    display:inline-block;
    margin: 0 50px;
}

nav a>img{
    width:115px;
    height:170px;
}

nav a>img.hoverImg_normal{
    position:relative;
    left:0;
    z-index:2;/*Put image behind text*/
}

nav a>img.hoverImg_highlight{
    position:relative;
    left:0;
    top:-174px;/*5 + 1 for text*/
    opacity:0;
    transition: 1s;
    -moz-transition: 1s; /* Firefox 4 */
    -webkit-transition: 1s; /* Safari and Chrome */
    -o-transition: 1s; /* Opera */
    z-index:2;
}

nav a:hover>img.hoverImg_highlight{
    opacity:1;
}

nav a>img.text {
    position: relative;
    z-index: 3;
    width: auto;
    height: auto;
    top:-267px;
}

.about {
    margin-top: 3px;
}

.home {
    margin-top: 8px;
}

Answer 1

有两个问题：

1. 您的文字图片高度不同，您应该尝试使用三张相同高度的图片
2. 使用相同的图像高度仍会导致不同的位置，因为.about和.home类的margin-top不同。此外，没有.contact类的定义，并且联系人text-image在其属性中没有“contact”类，与home和about的文本形成对比。

还有一件事：您应该为图像使用替代文字，例如：

<img class='text home' src='images/home.png' alt='home' />

Answer 2

使用绝对定位而不是使用负top值向上拉图像。很容易做到，因为你已经包含 jQuery 。下面的代码段会根据top的{​​{1}}值和图片“top来计算相应的#main值：

height

我可能在这里或那里有一个错字，但我希望这有帮助！

Answer 3

看看这个jsfiddle。这是你正在做的一个简单的版本。 （我认为）http://jsfiddle.net/sheriffderek/6HcdC/