html - CSS 显示 : inline-block and width: 100% does not work on IE6 and IE7

Question

CSS display: inline-block 和 width: 100% 不适用于 IE6 和 IE7。
有人有解决办法吗？谢谢!

<style>
nav {text-align: justify;}
nav li {display: inline-block; white-space: nowrap;}
nav span {display: inline-block; width: 100%;}
</style>
...
<nav>
  <ul>
    <li>Home Page</li>
    <li>Services</li>
    <li>Clients</li>
    <li>Portfolio</li>
    <li>Contact Us</li>
    <span></span>
  </ul>
</nav>

更新:
所以它在 IE6 上也能正常工作，但是当列表有更多的单词时它看起来不太好->“联系 我们”:

nav { text-align: justify; }
nav * { display: inline; }
nav span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}
<nav>
  <ul>
    <li>Home Page</li>
    <li>Services</li>
    <li>Clients</li>
    <li>Portfolio</li>
    <li>Contact Us</li>
  </ul>
  <span></span>
</nav>

Answer 1

对于 IE6 和 IE7，您可以尝试使用(在包含条件注释的样式表中)

display: inline;
zoom: 1;

zoom: 1 触发 hasLayout 这类似于 inline-block 的行为。

不过，我同意上述评论者的观点，即您不应将 span 作为 ul 的直接子代。