仅 CSS 菜单，IE7 问题答案

【问题标题】：CSS Only Menu, IE7 Issues仅 CSS 菜单，IE7 问题
【发布时间】：2013-03-05 10:06:12
【问题描述】：

我一直在努力让我的纯 CSS 菜单在所有版本的 IE 中都能正常工作，我想我几乎已经把它搞定了，除了 IE7。

.header-bar {
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background: #333;
  font-size: 1.2em;
  font-weight: bold;
  z-index: 1000;
}
.header-bar a:hover {
  text-decoration: none;
}
.header-bar a {
  display: inline-block;
  padding: 7px 10px 7px 10px;
  color: #2C8FAA;
  font-size:1.1em;
}
.header-bar ul {
  list-style-type: none;
  display: inline-block;
  position: relative;
  height: auto;
}
.header-bar ul li {
  background: #333;
}
.header-bar ul li:hover {
  background: #444;
  color: #34AACB;
}
.header-bar ul.nav > li {
  display: inline-block;
}
.header-bar ul ul {
  display: none;
}
.header-bar ul ul li {
  border-top: 1px solid black;
}
.header-bar ul li:hover > ul {
  margin: 0;
  display: block;
  position: absolute; /* overrides other settings */
  /* top: 28px; */
  height: 28px;
  min-width: 200px;
}
.header-bar ul ul li:hover ul {
  top: 0; /* match position of parent, which should be position: relative; */
  position: absolute;
  margin-left: 199px; /* 150px min-width -1 px border */
  border-left: 1px solid black;
}
.header-bar ul li a { 
  display: block;
}
.header-bar ul li ul li {
  position: relative;
}
.header-bar ul ul li:hover ul ul {
  position: absolute;
  top: -48px; /* 28 + 1 for border */
  margin-left: 199px; /* 150px min-width -1 px border */
  border-left: 1px solid black;
}
.header-bar ul ul li:hover ul ul {
  top: 0;
}

为 HTML 设置如下样式：

<div class="header-bar">
  <div class="container">
    <ul class="nav">
      <li>
        <a href="#">Menu Item 1</a>
        <ul>
          <li>
            <a href="#">Menu Item 1, Submenu 1</a>
            <ul>
              <li><a href="#">Menu Item 1, Submenu 1, Sub-submenu 1</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

这似乎适用于子菜单，但父菜单项似乎采用块布局，而不是inline-block。在这一点上，我正在努力与 IE 作斗争，希望能多多一双眼睛。

【问题讨论】：

标签： html css internet-explorer internet-explorer-7 web-standards

【解决方案1】：

尝试正确关闭您的li 标签：

<div id="header-bar">
  <div class="container">
    <ul class="nav">
      <li><a href="#">Menu Item 1</a></li>
        <ul>
          <li><a href="#">Menu Item 1, Submenu 1</a></li>
            <ul>
              <li><a href="#">Menu Item 1, Submenu 1, Sub-submenu 1</a></li>
            </ul>
        </ul>
    </ul>
  </div>
</div>

--编辑--

在你的 css 中使用它：

.header-bar ul.nav > li {
      display: inline-block;
      *float:left
}

它应该成功了。

【讨论】：

谢谢，我在示例中遗漏了一个（并且已经修复了它），但在生产中不是这样。
另外，您的 html 指的是 header-bar，而您的 css 指的是 .header-bar
@martindale 请不要使用*float: left;，而是使用zoom: 1;
是的，我知道这是一个 hack，但如果您需要一个有效的解决方案，您需要首先浮动所有元素而不是 inline-block。这意味着您需要额外的开发时间。
如果你需要漂浮，你也需要清除它们......还记得吗？

【解决方案2】：

一些事情。

<LI> 标签未正确关闭。
不支持display: inline-block;。

待办事项：

正确关闭所有<li>标签。

使用这个 CSS：

.header-bar ul.nav > li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

验证问题

如果您仍然真的担心没有 hack，您可以这样做。以这种方式使用 Paul Irish 的条件 HTML 类：

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

而在 CSS 中，你可以这样写：

.ie6 .header-bar ul.nav > li,
.ie7 .header-bar ul.nav > li {
    display: inline;
    zoom: 1;
}

现在您的 HTML 和 CSS 都有效。

【讨论】：