在Firefox中未呈现正确位置的导航项

Question

我在本站上的导航栏中使用树叶作为项目的背景图像。Chrome和Safari看起来都很好，但在Firefox中，这三片叶子在x轴的不同位置呈现，如下所示：

​

​

唯一呈现在正确位置的叶子是“关于我”的叶子。“家”叶的渲染比它应该的低约20 5px，而“接触”叶则低约5 5px。我想知道有人能发现为什么会发生这种事吗？

叶子和css的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类的边缘顶部不同，使用相同的图像高度仍然会导致不同的位置。此外，.contact类没有定义，与家庭和关于文本的文本相比，联系人文本图像在其属性中没有" contact“类。

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

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

Answer 2

使用绝对定位，而不是用负top值拉出图像。因为您已经包含了jQuery，所以很容易做到。下面的代码片段根据top的top值和图像的height计算适当的#main值。

var lft = [397, 617, 836];//I calculated those using jQuery
var cur = 0;
$(document).ready(function() {
    $(".hoverImg_highlight").each(function() {
        var tp = parseInt($("#main").offset().top, 10) - praseInt($(this).height(), 10);
        $(this).css({position: 'absolute', top: tp, left: lft[cur]});
        cur ++;
    });
});

我可能在这里或那里有一个错误，但我希望这能帮上忙！

Answer 3

看看这把小提琴。这是你正在做的事情的最基本的版本。(我想) http://jsfiddle.net/sheriffderek/6HcdC/