asp.net - CSS 友好适配器菜单控件在 IE 中不起作用

Question

我在使用旧式菜单控件让 Chrome 看起来正确时遇到了一些呈现问题，所以我决定切换并使用 CSS Friendly Adapters (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;}

Answer 1

也许尝试添加:

CSS

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

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