0

私はWeb サイトで作業しており、Chrome/Firefox では完全に動作しますが、IE8 と 9 で 2 つの問題が発生しています。

  1. IE9 では、ヘッダーのナビゲーション メニューが表示されません。

  2. IE8 では、ヘッダー全体が台無しになっています。タイトル、サブタイトル、およびナビゲーション メニューはすべて、メイン ヘッダー画像の上ではなく、その上に表示されます。（ここをクリックして、どのように見えるかを確認してください）。

これらは本当に簡単な修正だと確信していますが、見つけられませんでした。前もって感謝します。

コードを編集します。HTML:

    <div class="heightWrapper">
        <h1 class="birthofahero"><?php bloginfo( 'name' ); ?></h1>
        <h2 class="jennasue"><?php bloginfo( 'description' ); ?></h2>
        <img src="/resources/images/header.jpg" alt="StartLivingNow | Inspiring a Generation" />
        <nav class="topNavigationMenu">
            <ul>
                <li><a href="/" title="Home">Home</a></li>
                <li><a href="/about/">About</a></li>
                <li><a href="/blog/">Blog</a></li>
                <li><a href="/media/">Media</a></li>
                <li><a href="/newsletter/">Newsletter</a></li>
                <li><a href="/partnership/">Partnership</a></li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>
    </div>

CSS

.heightWrapper {
    height: 100%; /* To position the navbar at the bottom of the div */
    margin-bottom: -.4em; /* A magic number, for some reason. */
}
.topNavigationMenu {
    float: left;
    position: relative;
    bottom: 3.9em;
    margin-bottom: -3.9em;
    z-index: 100; /* test */
}
.topNavigationMenu li, .topNavigationMenu a {
    float: left;
}
.topNavigationMenu li a {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 2em;
    font-weight: bold;
    text-decoration: none;
    color: #004080;
    float: left;
    padding: .2em .4em;
}
.topNavigationMenu li a:hover, .topNavigationMenu li a:active {
    background-color: #004080;
    color: #fff;
}
4

2 に答える 2

0

IE8

その理由はあなたのレイアウトです。レイアウトには、次の 3 つがあります。

  • h1
  • h2
  • メニュー
    • h については、ブラウザーに存在しないフォントを使用したか、@font-face を使用するコンピューターを使用しました。Internet Explorer は @font-face などの多くの CSS3 コマンドをサポートしていないため、メニューが上部に表示されます。

    ソリューション：

    ヘッダー全体を画像にしてからメニューを入れます。

    IE9

    わかりませんが多分同じです。エラーチェックも忘れずに。

    于 2013-02-10T05:52:33.087 に答える
    0

    IE9 のナビゲーション メニューを修正します。position:relative を heightWrapper に適用し、position:absolute を .topNavigationMenu に適用します (既に bottom: 0 が設定されています)。.topNavigationMenu から float:left も削除する必要があります。

    IE8 の問題に関しては、header も nav も HTML 4 要素ではなく、IE 8 は HTML 5 をサポートしていません。モダナイザー ( http://modernizr.com/ ) をページの head セクションに含めるか、別の HTML5 shivを含めてみてください。 . これにより、IE7/8 でスタイルを設定できるようになります。

    于 2013-02-10T05:58:28.753 に答える