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上也可以正常工作，但是当列表中有更多单词时，它看起来不太好 - ＆gt; “联系我们”的：

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的直接孩子。

Answer 2

一些建议：

更正您的HTML - UL应仅包含LI，而不是SPAN
没有NAV元素
尝试使用float浮动LI：left - 你还应该在它们上面设置一个宽度
如果您想要一个元素填充页面的宽度，请使用display：block;这适用于所有浏览器 - 提供您的HTML是正确的！

看一下html validator，这可以帮助你解决HTML错误 - 还有一个很好的验证器插件，可以帮助你完成这项工作。

Answer 3

我没有重新创建代码，但我可以告诉你，你不允许嵌套在这样的ul里面的span元素。尝试将范围更改为li with和id，并查看是否获得更好的结果。

你想用这个来实现什么？

CSS显示：内联块和宽度：100％不适用于IE6和IE7

3 个答案: