css - IE6 和 IE7 导航列表项 float 问题

Question

像很多人一样，我在 IE7(和 6，但我不关心这个!)中遇到 float 元素问题

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

问题可能是 width: 100% for li。如果ul是100px，那么每一个li也会有100px=它们会如图所示显示。尝试为它们设置固定宽度，但 3x 宽度(+ padding，margins)应该小于 ul 的宽度。你也可以试试33%。 BT

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