2

このサイトのナビゲーション バーのアイテムの背景画像として葉を使用しています。Chrome と Safari ではすべて問題ないように見えますが、Firefox では、次の画像のように、3 つの葉が x 軸上の異なる位置にレンダリングされます。

ここに画像の説明を入力

正しい位置にレンダリングされている唯一のリーフは、'about me' リーフです。「ホーム」リーフは本来よりも約 20 ピクセル低くレンダリングされ、「連絡先」リーフは約 5 ピクセル低くレンダリングされます。なぜこれが起こっているのか誰かがわかるだろうか？

葉と 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

2 つの問題があります。

  1. テキスト画像の高さが異なります。同じ高さの 3 つの画像を試して使用する必要があります
  2. 同じ画像の高さを使用しても、.about クラスと .home クラスのマージントップが異なるため、位置が異なります。さらに、.contact クラスの定義はなく、home and about のテキストとは対照的に、contact text-image の属性には「contact」クラスがありません。

もう 1 つ: 画像には次のような代替テキストを使用する必要があります。

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

このjsfiddleをチェックしてください。これはあなたがしていることの骨の折れるバージョンです。（私は思う） http://jsfiddle.net/sheriffderek/6HcdC/

于 2012-08-26T16:18:35.443 に答える
0

top負の値で画像を引き上げるのではなく、絶対配置を使用してください。jQueryが既に含まれているため、非常に簡単に実行できます。以下のスニペットは、 と images の値にtop応じて適切な値を計算します。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 に答える