3

こんにちは-私はこれを可能な限りグーグルで検索してきましたが、何も役に立たないようです.

私はウェブサイト (www.philipdukes.co.uk) で作業してきましたが、ナビは FF、Safari、クロム、さらには IE6 (奇跡的に) でも正常に動作しているように見えますが、私のシステムでは IE8 で惨めに失敗します:ナビゲーション リンクが機能しません。

それらの上にカーソルを置き、ロールオーバー アニメーションを取得しますが、「クリック可能」ではありません。これらは基本的なテキスト リンクであり、テキストが画面外に配置され、リンクが表す領域をクリックできるようにする必要があります。スペースを埋める画像はリンクではありません。画像を削除するとその領域をクリックでき、テキスト整列を削除するとリンク テキストをクリックできます (リンク テキストのみ)。

すべてが完全に機能する前に整理する必要がある最後のものなので、それは私を狂わせています...

ナビゲーション バーのコードは次のとおりです。

    <div class="navHolder">
    <div class="nav current-home">
        <div id="home"><img src="images/nav/home.png" alt="home." /><a href="index.html">home.</a></div>
        <div id="bio"><img src="images/nav/bio.png" alt="biography." /><a href="bio.html">biography.</a></div>
        <div id="media"><img src="images/nav/media.png" alt="media." /><a href="media.html">media.</a></div>
    </div>
    <div class="nav2 current-home">
        <div id="press"><img src="images/nav/press.png" alt="press." /><a href="press.html">press.</a></div>
        <div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div>
        <div id="contact"><img src="images/nav/contact.png" alt="contact." /><a href="contact.php">contact.</a></div>
  </div>

css スタイルはここにあります (ここでの最適化も大歓迎です!):

    /*
*
*   BEGIN NAV SECTION
*
*/
.navHolder{
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
}
.nav, .nav2 {
    width: 600px;
    height: 50px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
    position: absolute;
    top: 0px;
    overflow: hidden;
    width: 200px;
    height: 50px;
    background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
    position: absolute;
    z-index: 100;
    display: block;
    top: 0px;
    height: 50px;
    width: 200px;
    text-indent: -9000px;
}
.nav img, .nav2 img{
    position: relative;
    z-index: 50;
    width: 200px;
    height: 50px;
}
#home, #press{
    left: 0;
}
#bio, #pdr{
    left: 200px;
}
#media, #contact{
    left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
    background-position: 0 -246px;
}
4

3 に答える 3

4

あなたが欠けています：

.nav a, .nav2 a  {
    left: 0;
}

これで問題は解決するはずです。を使用する場合は、必ず縦 (topまたはbottom)と横 (leftまたはright) の配置を設定してposition:absoluteください。

アップデート

a が設定されているときはいつでも、background期待どおりに機能し始めます。多くのテストを通じて、おそらく問題を解決する別の方法が見つかるでしょう。しかし、これは私がすることです：

最良の方法:

  1. タグを取り除くimgか非表示にして、代わりにタグとして適用しbackground-imageますa。
  2. タグの を、親の唯一の目に見える子になるように変更しpositionます。arelativeabsolutediv

クイックウェイ

.nav a, .nav 2 { background: url(/images/shim.png) }

shim.png8 ビットの完全に透明な 1 ピクセルの PNG はどこにありますか。8 ビットの PNG shim は、同じサイズ (1 ピクセル) の gif よりも小さく、すべてが計画どおりに機能します。

于 2009-12-03T18:43:44.867 に答える
1

IE7 に提供するものと同じスタイルを IE8 に提供し、ドキュメント ヘッドに次の要素を配置します。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

これにより、IE8 が IE7 をエミュレートします。IE7 で問題が発生していないため、これでうまくいくと思います。

于 2009-12-03T18:46:45.673 に答える
0

そこで何が起こっているのか完全にはわかりませんが、リンクと画像要素の階層化に何らかの問題（おそらくIE8のバグ）があるようです。z-indexof.nav img, .nav2 imgを50ではなく負の値に変更すると、リンクがクリック可能になります。

ただし、この場合、それが実際的な可能性であるかどうかはわかりません。負のzインデックスにより、画像が表示されなくなる可能性があるためです。

于 2009-12-03T18:54:00.727 に答える