我正在开发一个网站，它在 Chrome/Firefox 中运行良好，但我在 IE8 和 9 中遇到了两个问题。
在 IE9 中，标题中的导航菜单不显示。
在 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;
}