IE7 CSS 水平菜单 - Li 似乎相互嵌套

Question

我知道这个 IE 问题会一次又一次地出现，但我整个上午都在寻找答案，但似乎没有任何帮助。

我的水平导航菜单似乎在除 IE7 之外的所有浏览器中都能完美呈现。我认为问题可能与我的列表没有宽度有关（但我不想要宽度，我希望它是自动的，具体取决于文本的长度），或者 li 似乎位于每个列表中其他并继续应用 14px padding-top。我不知道他们为什么坐在彼此里面，因为我的 li 都有结束标签和 float:left;

这是我的代码..

<div id="navig">
    <ul>
        <li class="navig-left"></li>
        <li class="home"><b>Home</b></li>
        <li><a class="tabs" href="about.html">About Us</a></li>
        <li><a class="tabs" href="services.html">Services</a></li>
        <li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li>
        <li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li>
        <li><a class="tabs" href="contact.html">Contact Us</a></li>
        <li><a class="tabs" href="careers.html">Careers</a></li>
        <li><a class="tabs" href="affiliates.html">Affiliates</a></li>
        <li class="navig-right"></li>
    </ul>
</div>

<div class="clr"></div>



#navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); }
#navig ul { list-style-type:none; height:46px; width:960px; }
#navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; }
#navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; }
#navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; }
.navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); }
.navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); } 

Answer 1

尝试添加以下 CSS 规则，以便所有 li 项目浮动（因为您使用的是浮动方法）：

#navig ul li {float:left;}

查看您的样式表，您实际上并未将float:left 应用于菜单中的所有列表项，只有li.active 和li.home。其他浏览器似乎可以处理它，但 IE 不喜欢它。

jsFiddle（请注意，我必须修改一些颜色才能使其正常工作，因为您在我们无法访问的背景图像上使用白色文本 - 出于测试目的而导致白底白字。）

我在 IE 7/8/9、FF 和 Chrome 中测试了这个小提琴。现在始终如一地工作。

Answer 2

您可以强制 IE7 呈现为 ie8，并将其添加到页面头部。

<meta http-equiv="X-UA-Compatible" content="EDGE" />