1

これは、これまで遭遇したことのない z-index で発生している非常に興味深い問題です。先に進み、あなたが抱くかもしれない最初の考えの 1 つに答えさせてください。z-index がある各要素に必要な配置を既に設定していますが、そうではありません。可能な限り並べ替えを試みましたが、基本的には 2 つの固定要素があり、1 つは Web サイトの見出しテキスト、次はdivナビゲーション項目の順序付けられていないリスト (それぞれ左にフロートし、パーセンテージ幅が指定されています) を含みます。

問題の場所は次のとおりです (1000px より大きい幅で表示していることを確認してください)。

私の人生では、最初の 2 つのナビゲーション項目 (「ホーム」と「概要」) が実際に完全にマウスオーバーしない理由を特定できませんでした。マウスオーバー機能は、その上の見出しのディセンダーによって遮断されているようです。

私は問題のjsFiddleを作成し、実際に私の問題を指摘しようとしましたが、これにはカスタムフォントを使用していますが、これは私の知る限りjsFiddleでは機能しません。この問題は IE 固有の問題ではなく、クロスブラウザーの問題であることに注意してください。申し訳ありませんが、それ以外の場合はあまり役に立ちませんが、Firebug はあなたの友達だと思います。

ただし、この HTML/CSS コードを投稿しますが、Firebug で表示するよりも簡単かもしれません...

HTML:

<div id="header">
    <h1 id="logo"><a href="#">Page Title</a></h1>
    <h2 id="tagline"><a href="#">Here's a tagline</a></h2>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

CSS:

#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; z-index: 4; }
#logo a, #tagline a { color: #FFF; text-shadow: 2px 2px 0px #f7be82; -webkit-text-shadow: 2px 2px 0px #f7be82; -moz-text-shadow: 2px 2px 0px #f7be82; -o-text-shadow: 2px 2px 0px #f7be82; }
#logo a:hover, #tagline a:hover { color: #FFF; }
#tagline { font-size: 18px; }
#tagline a { text-shadow: 1px 1px 0px #f7be82; -webkit-text-shadow: 1px 1px 0px #f7be82; -moz-text-shadow: 1px 1px 0px #f7be82; -o-text-shadow: 1px 1px 0px #f7be82; }

.pageTitle { text-align: center; font-size: 48px; }

#header {
    position: fixed;
    z-index: 3;
    width: 960px;
    background: #9cddc8;
}

#nav {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 50px;
    top: 81px;
    left: 0px;
    background: #f7be82;
    border-bottom: 2px solid #efb87e;
}

#nav ul { width: 900px; display: block; margin: 0 auto; overflow: hidden; }

#nav ul li {
    position: relative;
    z-index: 5;
    float: left;
    line-height: 50px;
    width: 16.66%;
    line-height: 45px;
    text-align: center;
}

#nav ul li a {
    font-family: 'Pacifico', cursive;
    font-size: 24px;
    color: #FFF;
    text-shadow: 1px 1px 0px #9cddc8; -webkit-text-shadow: 1px 1px 0px #9cddc8; -moz-text-shadow: 1px 1px 0px #9cddc8; -o-text-shadow: 1px 1px 0px #9cddc8;
}

この問題について何か助けていただければ幸いです、ありがとう！

4

3 に答える 3