0

要素を別の要素の下部に配置するために、Web ページにマークアップを追加しました。ただし、これを行うと、ページのメニューが IE7 に表示されません。マークアップは次のとおりです。

<div id="header">
    <div class="panel">
        <h1>Heading</h1>
        <div class="nav">
            <ul>
                <li class="hdr"><a class="hdr" href="#">Submenu One</a>
                    <ul>
                        <li class="menuitem"><a href="#">Submenu one</a></li>
                        <li class="menuitem"><a href="#">Submenu 2</a></li>
                    </ul>
                </li>
                <li class="hdr"><a class="hdr" href="#">Submenu 2</a></li>
                <li class="hdr"><a class="hdr" href="#">Submenu 3</a></li>
            </ul>
        </div>
    </div>
</div>

関連するスタイル シートには、次のものが含まれます。

#header
{
    position: relative; /* Move to bottom */
    height: 100px;
    width: 100%;
}

.nav
{
    position: absolute; /* Move to bottom */
    bottom: 0;    /* Move to bottom */
}

#header ul
{
    padding-left: 0;
    margin-left: 0;
    margin: 12px 0px 0px 0px;
    list-style: none;
    position: relative;
    left: -10px;
    float: left;
}

#header ul li.hdr
{
    display:-moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE Hack */
    margin-right: 15px !important;
    font-size: 16px;
    z-index: 1000;
}

#header ul li a.hdr
{
    display: block;
    color: white !important;
    text-decoration: none;
    padding: 9px 11px 11px 11px;
}

#header ul li a.hdr:hover
{
    background: #505050;
    border: solid 1px #606060;
    padding: 8px 10px 10px 10px;
    text-shadow: 2px 2px 2px #111;
}

#header ul ul
{
    display: none;
    border: 1px solid #a0a0a0;
    background: #f5f5f5;
    position: absolute;
    top: 27px;
    left: 0px;
    zoom: 1;
    padding: 10px;
    line-height: 20px;
}

#header ul li:hover > ul
{
    display: block;
}

#header ul ul li
{
    display: block;
}

#header ul ul li a
{
    font-size: 12px;
    border: none;
    color: #000;
    background: #f5f5f5;
    text-decoration: none;
    padding: 8px;
}

コメント /* 下に移動 */ のある行は、nav div をヘッダーの一番下に移動する役割を果たします。z-index や他の属性をあらゆる場所に配置して、IE が hasLayout が true に等しい要素を確実に認識できるようにしましたが、役に立ちませんでした。私はこれで髪を引っ張っています。どんな助けでも大歓迎です。

4

1 に答える 1

0

あなたの IE ハックは間違っています:

使用する

*+display: inline; /* IE Hack */

それ以外の

*display: inline; /* IE Hack */

  • (星) ハックは IE6 専用です。

【こちらをご覧ください】【1】

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

于 2012-09-16T07:35:40.567 に答える