css - IE6 中水平导航菜单 css 的问题

Question

我有一个问题。我有一个由官方 css 教程制作的水平导航菜单。这是 CSS:

div.horizontal
{
width:700px;
height:30px;
margin:0 auto;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
position:relative;
padding-left:20px;
padding-right:20px;
padding-top:18px;
padding-bottom:0px;
}
div.horizontal a:link,div.horizontal a:visited
{

white-space: nowrap;
height: 40px;
line-height: 15px;
font-weight: normal;
font-size:12px;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
z-index: 100;
color: #fff;
cursor: pointer;
font-family:"Trebuchet MS", Arial, sans-serif;
}
div.horizontal a:hover,div.horizontal a:active
{
    background-image:url(images/horiz-menu-active.png);
    background-repeat:repeat-x;
color:#FFF;
}

HTML:

<div class="horizontal">
            <ul>
                <li><a href="contacts.php">За контакти</a></li>
                <li><a href="comments.php">Мнения и коментари</a></li>
                <li><a href="media_center.php">Медиа Център</a></li>
                <li><a href="news.php">Новини</a></li>
                <li><a style="border-right:2px #900 solid;" href="aboutus.php">За нас</a></li>
            </ul>
</div>

在包括 IE7 和 IE8 在内的所有浏览器中，它显示正常，但在 IE6 中它是垂直的。请给我一些建议该怎么做？

此处为实例:jsfiddle.net/uhRzR

Answer 1

我建议您解决 ie6 问题的方法是为 div.horizo​​ntal li

添加固定宽度

示例:http://jsfiddle.net/uhRzR/2/ <- 在此示例中，我添加了宽度 100px。

---

另一种解决方案是对 Internet Explorer 使用 css hack，为 div.horizo​​ntal li 添加 _width:0px;

示例:http://jsfiddle.net/uhRzR/5/