CSS友好的适配器菜单控件不工作在IE

Question

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

因此，我设计了我的菜单，现在他们可以在Chrome，Safari和Firefox中使用，但不能使用IE浏览器。我有一个从数据源加载的基本水平列表，在连接到它们的动态列表中有1-13个项目。现在，在Chrome和Firefox中，菜单设置完成后，动态菜单项正在静态菜单项下正常显示。但在IE（7/8）中，动态菜单项直接出现在当前悬停的静态菜单项的右侧（并且在当前静态菜单项后面的第一个动态项目的右侧）

这是菜单在Chrome中正常工作的截图：在IE浏览器正在上空盘旋 http://i42.tinypic.com/2d3lom.png

而且同一个菜单的截图（在这种情况下，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

​​

我在想，这可能会迫使IE浏览器把它放在你需要它的地方。不是100％确定，并且无法在本地机器上尝试。