IE7 调试问题 - <li> 中的分词答案

【问题标题】：IE7 Debug Issue - Word Breaks in <li>IE7 调试问题 - <li> 中的分词
【发布时间】：2011-05-29 16:46:18
【问题描述】：

我在 IE7 中遇到了一个我似乎无法解决的非常基本的问题。如果您查看此页面：http://vitaminjdesign.com/IAM/company/，您会注意到垂直导航 (ul id="leftcol") 在 IE7 中显示不正确。每个单词都出现在自己的行中。这是我的 HTML /. CSS：

<ul id="leftcol">
    <li><a class="active" href="#">Company Overview</a></li>
    <li><a href="#">Why Choose Parker?</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Financing Promotions</a></li>
    <li><a href="#">Licensing & Credentials</a></li>
</ul>

ul#leftcol{float:left; width:185px; position:relative; z-index:10;}
ul#leftcol li{float:right; clear:right; margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
ul#leftcol li a{color:#505050; text-decoration:none; font-size:15px; float:right;}
ul#leftcol li a.active,ul#leftcol li a:hover{color:#89b060;}

有什么想法吗？

【问题讨论】：

标签： css debugging cross-browser internet-explorer-7

【解决方案1】：

尝试添加

ul#leftcol li a {
   white-space: nowrap;
}

你也可以给你的 li 元素一个固定的宽度。

或者可能是一些显示属性以及display: inline;

【讨论】：

【解决方案2】：

从下面删除clear:right;

ul#leftcol li{float:right;margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }

【讨论】：

@JChase11 ...我的第一个答案错了。但是，如果您从 css 中的以下 ul#leftcol li 中删除 clear:right;。它将修复 IE 7 而不会影响任何其他浏览器。
谢谢，奇怪的是 IE7 会清除每个单词而不是整个 li 元素
知道为什么会这样吗？