Question

大家好我正在为IE 8或IE 9 -Compatability模式中需要支持的站点创建水平菜单。在IE 9中，这很好，但在IE8 / 9兼容性中，水平布局会丢失，因此项目会垂直列出。悬停效果（背景图像）仍然有效，以及其他样式。任何人都可以看看CSS并告诉我我缺少什么，以便在早期的浏览器版本中正确呈现？

HTML

 <div id="navinformheader" class="topmenubar">
        <ul id="navigationmenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Reporting</a></li>
            <li><a href="http://vair50703:7000/">Dashboard</a></li>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Management Console</a></li>
        </ul>
    </div>

CSS

   .topmenubar ul a
{
    line-height: 28px;
    list-style-type:none;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

.topmenubar li  a:hover
{
    height: 28px;
    list-style-type:none;
    display: inline-block;
    text-decoration: none;
    line-height:28px;
    background-image: url('../images/topgradientBarHl.png');
    background-repeat: repeat-x;
}

.topmenubar ul
{
    display:inline-block;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
}

.topmenubar li
{
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
}

.topmenubar
{
    display: block;
    width: 100%;
    height: 27px;
    min-width: 920px;
    border-bottom: 1px solid #47547d;
    background-image: url('../images/topgradientBar.png');
    background-repeat: repeat-x;
}

提前致谢

Answer 1

对不起所有人，在查看CSS时我意识到我有内联块导致元素返回。将每个ul和li元素的属性更改为

display:inline;

解决了这个问题。

希望这至少可以帮助其他人。

由于

UL li水平菜单在兼容模式IE或IE 8中无法正确呈现

1 个答案: