html - IE 7 或 8 的 CSS 问题在所有其他浏览器中工作正常

Question

我已经为我的网络应用程序创建了一个菜单和子菜单栏。现在，我应用的 css 类在 mozilla、chrome、safari 中完美运行。但它在 IE 7 或 8 上根本无法正常工作。

生成菜单的HTML代码如下:

<div id="menu">
  <ul class="navigation" id="navigation_menu">
    <li class="navigation_active navigation_first">
      <a href="/Profiler/dashboard/loadDashboard">Dashboard</a>
    </li>
    <li>
      <a href="/Profiler/users/showSearch">Users</a>
    </li>
    ......
  <ul class="subnavigation" id="subnavigation_menu">
    <li class="subnavigation_active subnavigation_first">
      <a href="/Profiler/dashboard/loadDashboard">Master Dashboard</a>
    </li>
    <li>
      <a href="/Profiler/dashboard/loadSecurityDashboard">Security Dashboard</a>
    </li>
    ....
</div>

现在我的 css 类如下:

.navigation {
    list-style-type: none;
    clear: both;
    padding-left: 0px;
border-bottom:1px hidden #d8d8dc; background:#333333 url(../images/menu_main.png) repeat 0px 0px;
margin-top: 0px;
    overflow: hidden; /* Clearing floats */
}

.navigation li {
    float:left; list-style-type: none;
}

.subnavigation {
    list-style-type: none;
    clear: both;
    margin-top: 0px;
    background-color:#ffffff;
    border-bottom:1px solid #000000;
}
.subnavigation li {
    float:left; list-style-type: none; 
}
.subnavigation li a {
    float:left; margin-right:10px; padding:4px 5px; font-size:75%; font-weight:bold; color:#434343
}

现在在 mozilla 和其他浏览器中生成的菜单看起来很漂亮，如下所示:

在 IE 7 或 8 中它看起来像下面这样: 我没有得到 IE 的确切问题。任何帮助将不胜感激......

Answer 1

你有重置 CSS 吗？看起来 IE 可能有一些默认边距或其他东西。尝试:

.navigation ul li { margin: 0; }

...在您的其他边距设置之前。

哦，你关闭了你的标签，对吧？抱歉，只是没有出现在代码中。

正如 babtek 所说，.navigation 和 .subnavigation 可能正在使用 display:inline。子导航中缺少白色背景听起来像是这种迹象……虽然不确定。 :)(仍然很菜鸟)。