html - Internet Explorer CSS header 问题

Question

我正在研究 a website , 它在 Chrome/Firefox 中完美运行，但我在 IE8 和 9 中遇到了两个问题。

1. 在 IE9 中，标题中的导航菜单不显示。

2. 在 IE8 中，整个 header 都被搞砸了。标题、副标题和导航菜单都出现在主标题图像上方，而不是在其顶部。 (Click here to see what it looks like)。

我确信这些都是非常简单的修复，只是我找不到它们。提前致谢。

编辑代码。 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;
}

Answer 1

修复了 IE9 中的导航菜单应用 position:relative 到你的 heightWrapper 和将 position:absolute 应用于 .topNavigationMenu(您已经设置了 bottom: 0)。您还应该从 .topNavigationMenu 中删除 float:left。

至于 IE8 问题，header 和 nav 都不是 HTML 4 元素，IE 8 不支持 HTML 5。尝试在页面的 head 部分或另一个 HTML5 shiv 中包含 modernizer ( http://modernizr.com/ )。这应该允许您在 IE7/8 中设置它们的样式。