CSS显示:内嵌块和宽度:100%在IE6和IE7上不起作用
CSS display: inline-block
和在IE6和IE7上不起作用。
有没有人有一些解决方案?谢谢!CSS显示:内嵌块和宽度: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>
我还没有重新创建代码,但我可以告诉你,你不允许像这样嵌套在ul中的span元素。尝试改变span和li和id,看看你是否有更好的结果。
你想用这个做什么?
对于IE6和IE7,你可以尝试使用(在样式表中包含的条件注释)
display: inline;
zoom: 1;
zoom: 1
触发hasLayout
这是类似的inline-block
行为。但是,我同意上述评论者的意见,即不应该将span
作为ul
的直接子代。
它不起作用。 – Binyamin 2010-07-05 12:54:55
几点建议:
- 纠正你的HTML - UL应该只包含LI,不能跨
- 没有这样的事,作为一个NAV元素
- 尝试漂浮在李的使用浮动:左 - 你还应该在它们上设置一个宽度
- 如果你想要一个元素来填充页面的宽度,使用display:block;这将适用于所有浏览器 - 提供您的HTML是正确的!
看看的html validator,这应该帮助你与你的HTML错误 - 也有Firefox的一个伟大的验证插件,也没有工作。
'nav'是一个有效的HTML5元素。 – 2010-07-05 12:53:06
'nav'是html5标记 – Binyamin 2010-07-05 12:54:16
IE 6和7(实际上8)不会将您的样式应用于'
无论如何,你需要什么'inline-block'? – 2010-07-05 12:01:15
它使列表项目水平滚动而不是垂直滚动。 – Chris 2010-07-05 12:02:44