Question

我的水平菜单在IE6中垂直显示（适用于IE9或firefox）。经过一些研究似乎显示：内联块是问题。但我试过并多次错误仍然搞砸了。你能告诉我如何修改吗？

HTML：

<!DOCTYPE html >
<html dir="ltr" lang="zh-TW">
    <head><link rel="stylesheet" type="text/css" href="style.css"/></head>
    <body>
        <div id="s4-workspace">
            <div id="s4-bodyContainer">
        <div>
                <div>
                  <table cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td nowrap="nowrap">
                        <div class="abcde-topmenu" data-name="TopNavigationNoFlyoutWithStartNode">
                            <div id="DeltaTopNavigation" class="s4-tn ms-displayInline ms-dialogHidden">
                                <div class="menu">
                    <div id="zz12_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
                        <ul id="zz13_RootAspMenu" class="root ms-core-listMenu-root static">
                            <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Item 1</span></span></a>
                            <ul class="static">
                                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href=""><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Item 2</span></span></a></li>
                                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href=""><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Item 3</span></span></a></li>
                            </ul>
                            </li>
                        </ul>
                    </div>
                                </div>              
                </div>
                        </div>
                        </td>
                    </tr>
                </table>      
              </div>
            </div>
        </div>
       </div>
    </body>
</html>

样式表：

.block{display:block}
.abcde-topmenu .s4-tn li.static .menu-item {background:url(top_menu_item.png) no-repeat -15px 5px ;  width:152px; _width:170px; height:30px;_height:40px;text-decoration: none }
.abcde-topmenu .s4-tn li.static a.selected {background:url(top_menu_item_o.png) no-repeat -15px 5px ;}
.abcde-topmenu .menu a.menu-item span.menu-item-text{ color:#fff; font-size: 14px; height: 30px;  text-align: center;line-height: 35px; line-height: 35px\9; *line-height: 35px; _line-height: 35px;}

.ms-core-listMenu-horizontalBox LI{
    display: inline-block;
    *display: inline;
    float:left;

}
.ms-core-listMenu-horizontalBox UL{
    display: inline-block;
    *display: inline;
    float:left;

}

.s4-tn li.static > .menu-item{
display:inline-block;
vertical-align:middle;
float:left;

}
.s4-tn li.dynamic > .menu-item{
display:block;
}

.menu .menu-item,
.menu .menu-item .additional-background,
.menu .menu-item .additional-background .menu-item-text
{
display:block;
}

谢谢！

IE6中垂直列出的水平菜单按钮

0 个答案: