Question

我有一些下拉菜单似乎在IE8中没有很好地对齐 - 它们在Firefox 3和IE7中很好地对齐。具体来说，下拉列表似乎忽略了我的权利：0;样式。一张图片说千言万语，这就是它的样子：

Misaligned menu http://lh5.ggpht.com/_gXJgvXl6JFY/TEf9v1BmECI/AAAAAAAAAA4/iGF-Wi8CTyU/misaligned%20menu.png

正如您所看到的，下拉列表的右侧应该与突出显示的“admin”li的右侧对齐，但它似乎位于中间。

重要的下拉式CSS样式是：

.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
}

重要的“admin”li样式是：

.ajs-menu-bar .ajs-menu-item, .ajs-menu-bar .ajs-button {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
}

该位的HTML是：

<li class="normal ajs-menu-item">
<a href="#" class="user trigger ajs-menu-title" id="user-menu-link"><span><span>admin</span></span></a>         
<div class="ajs-drop-down" style="width: 111px;">
<ul class="section-user-status first" id="user-menu-link-user-status">
... bunch of <li>s               
</ul>
</div>
</li>

如果有人能说出一些很棒的光，那就让我有点疯狂:(。

提前致谢!!!!

干杯，珍妮

Answer 1

我会为IE8推荐一个专门针对菜单的单独样式表。这是对IE8进行更改的唯一方法，而不是其他显示正常的浏览器。

下面的代码可能并不准确（关于单挑浏览器），但它应该让你知道该怎么做......

<![If lt IE7]>
    <link href="ie8.css" type="text/css" rel="stylesheet" />
<![End If]-->

完成后，将菜单的css复制到此文件中（按原样）并更改下拉列表的边距：

.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
margin-right: 40px !important;
}

如果如此处所示更改右边距不起作用，请尝试将左边距设置为负值。我知道，这个想法似乎很荒谬，但在我对液体设计的研究中，我发现它有时是获得正确的唯一途径。

HTH

CSS下拉菜单在IE8中未对齐

1 个答案: