html - 在另一个元素底部对齐 DIV 会导致菜单在 IE7 中不显示

Question

我在网页上添加了标记以将一个元素对齐到另一个元素的底部。但是，当我这样做时，我的页面上的菜单不会显示在 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;
}

带有注释的行/* Move to bottom */负责将 nav div 移动到标题的底部。我试过将 z-index 以及其他属性放在各处以确保 IE 看​​到 hasLayout 等于 true 的元素，但无济于事。我正在努力解决这个问题，非常感谢任何帮助。

Answer 1

你的 IE hack 是错误的:

使用

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

代替

*display: inline; /* IE Hack */

• (星号)hack 仅适用于 IE6。

[看这里][1]

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