2

我在本网站的导航栏中使用树叶作为项目的背景图像。在 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;
}
4

3 回答 3

3

有两个问题：

  1. 您的文本图像高度不同，您应该尝试使用三个相同高度的图像
  2. 由于 .about 和 .home 类的 margin-top 不同，使用相同的图像高度仍然会导致不同的位置。此外，.contact 类没有定义，与 home 和 about 的文本相比，contact text-image 的属性中没有“contact”类。

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

<img class='text home' src='images/home.png' alt='home' />
于 2012-08-26T15:23:17.753 回答
0

使用绝对定位而不是用​​负值向上拉图像top。很容易做到，因为你已经包含了jQuery。下面的代码片段top根据和 images'的top值计算适当的值：#mainheight

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 ++;
    });
});

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

于 2012-08-26T15:41:47.990 回答
0

看看这个jsfiddle。这是您正在做的事情的基本版本。（我认为） http://jsfiddle.net/sheriffderek/6HcdC/

于 2012-08-26T16:18:35.443 回答