导航列表项上的 IE6 和 IE7 浮动问题

Question

像许多人一样，我在 IE7（和 6，但我不在乎！）中遇到浮动元素问题

http://www.storybox.co.nz/wordpress/

在其他所有浏览器中看起来都不错，但在 IE7 中，导航链接位于彼此下方：

HTML（内联样式来自 js 下拉脚本）：

<div id="primary-menu">
  <div class="menu">
    <ul>
      <li><a href="#" class="sf-with-ul">Work.</a>
        <ul class="sub-menu" style="float: none; width: 1em; visibility: hidden; display: none;">
          <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">Spatial /</a></li>
          <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">Web /</a></li>
          <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">Graphic</a></li>
        </ul>
      </li>
      <li><a href="#">Lab.</a></li>
      <li><a href="#">About.</a></li>
    </ul>
  </div>
</div>

CSS：

#primary-menu {
    margin:-30px auto 30px;
}
#primary-menu ul {
    float:right;
}
#primary-menu li {
        float: left;
        list-style: none;
        margin-left: 10px;
            display:inline;
}
#primary-menu ul li a {
        float: right;
}

我已尝试在 li 项目和 a 项目上显示：内联，但这不起作用。

还有其他建议吗？谢谢！

Answer 1

问题可能是宽度：li 为 100%。如果 ul 是 100px，那么每个 li 也将有 100px = 它们将如图所示显示。尝试为它们设置固定宽度，但 3x 宽度（+ padding, margins）应该小于 ul 的宽度。您也可以尝试 33%。蓝牙

float: right 将 display: 块放在 item 上，添加 display: inline 和 float: right 是没有意义的。我的猜测是 IE 忽略了 display: inline。为内联元素设置宽度也是没有意义的。你的 CSS 简单没有意义:)

Answer 2

我在 IE 7 及以下版本测试的是更新后的 CSS。

#primary-menu {
   /* margin:-30px auto 30px;*/ /*Avoid negative margins*/
}
#primary-menu ul {
  float:right;
}
#primary-menu li {
    float: left;
    list-style: none;
    margin-left: 10px;
        display:inline;
}
#primary-menu ul li a {
   /* float: right;*/ /*This caused the issue*/
   }

希望对你有帮助