IE 7 或 8 的 CSS 问题在所有其他浏览器中都可以正常工作答案

【问题标题】：CSS Problem with IE 7 or 8 which is working fine in all other browsersIE 7 或 8 的 CSS 问题在所有其他浏览器中都可以正常工作
【发布时间】：2010-09-15 15:12:44
【问题描述】：

我为我的网络应用程序创建了一个菜单和子菜单栏。现在，我应用的 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 的确切问题。任何帮助将不胜感激...

【问题讨论】：

我认为IE出错的“相邻边距折叠”存在问题。我希望这能给你一些搜索词。我不是坏浏览器专家。

标签： html css cross-browser

【解决方案1】：

您是否进行了 CSS 重置？看起来 IE 可能有一些默认边距或其他东西。试试：

.navigation ul li { margin: 0; }

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

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

正如 babtek 所说，.navigation 和 .subnavigation 可能正在使用 display:inline。子导航中缺少白色背景听起来像是并表明了这一点……但不确定。 :)（还是很菜鸟）。

【讨论】：

。感谢您的反馈...标签在我的代码中正确关闭，您能解释一下它是如何呈现为 display:inline in IE 的吗？
我通常实现猜测和检查编程；意思是我不确切知道出现问题的方式或原因，但我会尝试一些事情来尝试解决它。 Internet Explorer 如此随机地呈现 HTML 和 CSS，最好不要深入研究它。即使您使用的是 IE7 和 8，也请在 Google 上搜索“终极 IE 备忘单”。它提供了一些关于 IE6 奇怪的内部工作原理的见解。这可以帮助你。
回答 Nirmal 关于为什么 ie 将锚标签呈现为显示的问题：内联。这是因为锚标签默认是内联的。 inilne 级别元素的示例有：span、anchor 等。developer.mozilla.org/en-US/docs/HTML/Inline_elements .. 块级别元素的示例有：div、section、article 等。developer.mozilla.org/en-US/docs/HTML/Block-level_elements

【解决方案2】：

看起来您在 .navigation 中的 a 标签可能表现为内联，它可能会拾取并显示空白。为什么不使用与 .subnavigation 中相同的浮动技术来设置 .navigation 链接的样式？

.navigation li a { float: left; padding: 4px 5px; }

【讨论】：

.. 你的建议对 IE 没有影响 :(