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

Question

大家好，我正在为需要在 IE 8 或 IE 9 兼容模式下支持的站点创建水平菜单。在 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 时我意识到我有内联 block 导致元素返回。将每个 ul 和 li 元素的属性更改为

display:inline;

解决了这个问题。

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

谢谢