导航列表项上的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宽度（+填充，边距）应小于ul的宽度。你也可以尝试33％。 BT

float：right将display：block放在item上，添加display：intline和float：right是没有意义的。我的猜测是IE忽略显示：内联。为内联元素放置宽度也没有意义。你的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*/
   }

希望这有帮助