在Firefox中未正確顯示導航項目

我在this site的導航欄中使用了葉子作爲背景圖片。一切看起來在Chrome和Safari罰款，但在Firefox中的三片葉子都在X軸上的不同位置呈現，如下圖所示：在Firefox中未正確顯示導航項目

enter image description here

是在正確的位置繪製唯一的葉'關於我'的葉子。「家」的葉子比它應該低20px左右，「接觸」葉子低了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; 
}

來源

2012-08-26 Nick

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-mustmemory/ – sheriffderek

它似乎可能會變得有點你的選擇器風格太困難了。檢查出這個鏈接8號：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
...也 - 它會有道理讓你的導航鏈接在列表中。如果可以的話 - 爲文字而不是圖像使用字體。我讚揚你渴望擁抱css的所有細節，你所做的更多的是簡單得多。我建議你撥回去重新開始。（我也喜歡製作一個.trans，並保留該類的轉換內容。 – sheriffderek

你有沒有嘗試過讓葉子圖像成爲背景圖像？ – sheriffderek

有兩個問題：

您的文字圖像高度不同，您應該嘗試使用相同高度的三張圖像
由於.about和.home的margin-top不同，使用相同的圖像高度仍會產生不同的位置類。此外，.contact類沒有定義，聯繫人文本圖像在其屬性中沒有「聯繫」類，與home和about的文本形成鮮明對比。

一兩件事：你應該使用的圖像，如替代文本：

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

來源

2012-08-26 15:23:17

使用絕對定位，而不是用負top值拉動圖像起來。因爲您已經包含jQuery，所以非常容易。下面的代碼片段計算相應的top值取決於#main的top值和圖像height：

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-26 15:41:47 Chris

看看這個jsfiddle。這是你正在做的一個純粹的骨頭版本。（我認爲）http://jsfiddle.net/sheriffderek/6HcdC/

來源

2012-08-26 16:18:35 sheriffderek

在Firefox中未正確顯示導航項目

回答

相關問題