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.horizontal li添加一个固定的宽度

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

另一种解决方案是将css hack用于为_width:0px;

添加div.horizontal li的Internet Explorer

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

Answer 2

只需替换你的css的这部分

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 li
{
display:inline;
}
div.horizontal a
{
padding:18px 20px 0px 20px;
}

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

2 个答案: