0

我在使用旧式菜单控件时遇到了一些渲染问题，让 Chrome 看起来正确，所以我决定切换并使用 CSS 友好适配器 (http://cssfriendly.codeplex.com/) 让我的菜单控件呈现为一个列表，希望有更多的跨浏览器一致性，那也没有用！

所以我设计了我的菜单样式，它们现在可以很好地与 Chrome、Safari 和 Firefox 一起使用，但不是 IE 我有一个从数据源加载的基本水平列表，动态列表中附加了 1-13 个项目。现在在 Chrome 和 Firefox 中，在设置菜单样式后，动态菜单项会正确显示在静态菜单项下方。但在 IE(7/8) 中，动态菜单项直接出现在当前悬停在静态菜单项的右侧（并且第一个动态项位于当前菜单项右侧的静态菜单项后面）

这是在 Chrome 中正常工作的菜单截图：http: //i42.tinypic.com/2d3lom.png

以及在 IE 中悬停的同一菜单的屏幕截图（在本例中为 8，但在 7 中看起来相同）：http: //i39.tinypic.com/2vmc4kn.png

这是菜单的渲染 HTML：

<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu">
    <ul class="AspNet-Menu">
        <li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected">
            <a href="javascript:void(0);" class="AspNet-Menu-Link  AspNet-Menu-Selected">Home</a>
            <ul>
                <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected">
                    <a href="default.aspx" class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Home</a>

                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">
                Financial Systems</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="fast/select_fast.aspx" class="AspNet-Menu-Link">Input Sales</a>
                                    </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="fast/select_fast_upload.aspx" class="AspNet-Menu-Link">Upload Sales</a>
                                   </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Reports</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_prior.aspx" class="AspNet-Menu-Link">Prior</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_summary.aspx" class="AspNet-Menu-Link">Summary</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_by_month.aspx" class="AspNet-Menu-Link">Monthly</a>
                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Administration</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="shoptracker/ShopTracker.aspx" class="AspNet-Menu-Link">Shop Tracker</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="shoptracker/shopupload.aspx" class="AspNet-Menu-Link">Shop Upload</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_weekly_comp.aspx" class="AspNet-Menu-Link">Weekly Comp Metrics</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_weekly_comp_upload.aspx" class="AspNet-Menu-Link">Weekly Comp Upload</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_estimates.aspx" class="AspNet-Menu-Link">Estimate Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/UserMaintenance.aspx" class="AspNet-Menu-Link">User Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/CorpUserMaintenance.aspx" class="AspNet-Menu-Link">Corporate Users</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/CountryISOCodeMaintenance.aspx" class="AspNet-Menu-Link">Country ISO Code Maint</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/TerritoryMaintenance.aspx" class="AspNet-Menu-Link">Territory Rollup Maint</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/ContentAdmin.aspx" class="AspNet-Menu-Link">Content Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/systemmessage.aspx" class="AspNet-Menu-Link">Edit System Message</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/MenuBarAdminDetails.aspx" class="AspNet-Menu-Link">Menu Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="/ChangePassword.aspx" class="AspNet-Menu-Link">Change Password</a>
                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Help</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="help.aspx" class="AspNet-Menu-Link">
                        Help Menu</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

这是我的 CSS（对于 IE 和 Chrome，但在 Chrome 样式表中我只是在下面添加了一个渐变）：

.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;}
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;}
.AspNet-Menu-Selected {color:#000000;}
.AspNet-Menu-WithChildren a {color:#FFFFFF;}
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;}
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;}
.AspNet-Menu-Leaf a {color:#000000;}
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;}
4

1 回答 1

0

也许尝试添加：

CSS

ul .AspNet-Menu-WithChildren ul {top:100%; float:none;}

我认为这可能会迫使 IE 将其放在您需要的位置。不是 100% 确定，也无法在我的本地机器上尝试。

于 2012-01-05T15:43:13.120 回答