IE8水平列表问题答案

【问题标题】：Problem with IE8 Horizontal listIE8水平列表问题
【发布时间】：2011-08-06 18:42:13
【问题描述】：

我有一个菜单栏。它在 mozilla 和 chrome 中正确显示（水平），但在 IE8 中显示为垂直。如何使用 css 使其水平

这里是html代码

<div id="navigation">
    <div id="myjquerymenu" class="jquerycssmenu">
        <br/>
        <ul>
            <li class="txtfont"><a href="#IMAGE#">Manage Image</a></li>
            <li class="txtfont"><a href="#">Manage Menu</a>
            <ul>
                <li class="txtfont"><a href="#PMENU#">Manage Parent Menu</a></li>
                <li class="txtfont"><a href="#MENU#">Manage Sub Menu</a></li>
                <li class="txtfont"><a href="#SUBMENU#">Manage Sub Sub Menu</a></li>
            </ul>
            </li>
            <li class="txtfont"><a href="#">Manage Content</a>
            <ul>
                <li class="txtfont"><a href="#ML#">Main Content</a></li>
                <li class="txtfont"><a href="#NEWS#">News</a></li>
                <li class="txtfont"><a href="#ANN#">Announcements</a></li>
            </ul>
            </li>
                <li class="txtfont"><a href="#FAQ#">Manage FAQ</a></li>
                <li class="txtfont"><a href="#SETTINGS#">Manage Settings</a></li>
                <li><a href="#logout#&action=logout">Log Out</a></li>
        </ul>
    </div>
</div>

css代码如下：

#navigation { height: 80px; width:200%; position: relative; padding-top:10px; padding-left:200px; float:none; font-size:12px; font-family: "Century Gothic"; font-weight:bold; }
.jquerycssmenu{

font-size:12px;
font-family: "Trebuchet MS", "sans-serif";
/*padding-left: 0px; offset of tabs relative to browser left edge*/
margin-top:25px;
color:#FFFFFF;
font-weight:normal;
border:#000000;

}

.jquerycssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
border-bottom-color:#000000;
}

/*Top level menu link items style*/
.jquerycssmenu ul li a{
display: block;
padding: 6px 7px 6px 7px;
min-width:70px;
margin-right: 6px; /*spacing between tabs*/
border: 1px solid #000000;
border-bottom-width: 1;
color:#FFFFFF;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#330066;
/*background-color:#99CC00;*/
text-align:center;
/*background: url(../../images/admin/images/menu_bg.jpg);*/
background-color:#330066;
behavior: url(border-radius.htc);
}

.jquerycssmenu ul li a:hover{
background:#663399;
}

/*1st sub level menu*/
.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
padding-top:0px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
display: list-item;
float: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
font-family: "Trebuchet MS", "sans-serif";
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
top: 0;
display: list-item;
float: none;
font-family: "Trebuchet MS", "sans-serif";
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{

font-family:"Trebuchet MS", "sans-serif";
font-size:13px;
font-weight:normal;
width: 160px; /*width of sub menus*/
background-color:#330066;
color:#FFFFFF;
padding: 6px 5px;
margin: 0;
border-top-width: 1;

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 1px;
}

.jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
background:#663399;
color: #ccc;
}

【问题讨论】：

如果您希望人们提供帮助，您确实需要提供更多信息。我会推荐代码 sn-ps，一个 jsfiddle，任何让我们知道的不仅仅是。 “Itz 破坏了我该怎么办？”
回答您的主要问题“IE 问题” - 是的，IE 存在问题，事实上很多。
您使用的是ul-type 列表吗？
我终于通过使用css进行调整解决了这个问题

标签： css list internet-explorer-8 alignment

【解决方案1】：

由于目前还没有代码可以分析，所以这是我的想法……

如果您使用的是display: inline-block;，我知道这在 IE7 中不起作用。但是，它应该可以在 IE8、FF、Chrome 中运行。

您可能想在菜单项上尝试float: left;，看看是否能解决您的问题。

【讨论】：

【解决方案2】：

您所描述的问题在 IE8 中并不明显。对我来说，在 IE8 中使用发布的代码（添加缺少的结束标签和另一个菜单级别）菜单是水平的

但是我已经整理了代码，因为在所有浏览器中都有很大的水平滚动，并且在 IE7 中存在“粘滞”悬停错误，所以也许某处存在差异，这也会为您修复 IE8

示例小提琴：here

这有效（因为它看起来一样，我不确定这是否是您的确切意图） - 在所有测试过的浏览器中

【讨论】：