0

I've added markup on a webpage to align a element at bottom of another element. However when I do this the menus on my page aren't displayed in IE7. Here's the markup:

<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>

The associated style sheet has the following:

#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;
}

The lines with the comment /* Move to bottom */ are responsible for moving the nav div to the bottom of the header. I've tried putting z-index's everywhere, as well as other attributes to ensure IE sees the elements with hasLayout equal to true, but to no avail. I'm pulling my hair out over this, any help much appreciated.

4

1 回答 1

0

你的 IE hack 是错误的：

利用

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

代替

*display: inline; /* IE Hack */

  • (star) hack 仅适用于 IE6。

[见这里][1]

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

于 2012-09-16T07:35:40.567 回答