IE8 兼容模式 Asp.net 菜单填充问题答案

【问题标题】：IE8 Compatibility Mode Asp.net Menu Padding issueIE8 兼容模式 Asp.net 菜单填充问题
【发布时间】：2012-04-17 15:43:38
【问题描述】：

我遇到了 ASP.net 垂直菜单的问题，在某些 IE8 模式和其他 IE 浏览器中，它会更改我的菜单项，以便在每个菜单项的底部有一个额外的空间，如下所示。

（左边不好，右边好）。这只是 IE。

_____________________

我做了一个边距：-1px;对于底部和顶部，得到了以下，仍然添加了空间，如下所示。

这是我的 CSS：

 .SideStaticMenuStyle a, 
 .SideStaticMenuStyle a:visited,
 .SideStaticMenuStyle a:active
 {
    color: #000000;     
    text-decoration: none;
    font-weight: normal;
    font-family: verdana;
    font-size: 12px;
    white-space:normal;
 }
 .SideStaticMenuStyle a:hover 
{
    color: #ffffff;     
    text-decoration: none;
    font-size: 12px;        
    font-weight: normal;
    font-family:  verdana;
 }

 .SideStaticMenuStyle td
 {
    background-color: #c2d0e9;
    width: 160px;
    line-height:14px;
 }

 .SideStaticSelectedStyle td,
 .SideStaticSelectedStyle a, 
 .SideStaticSelectedStyle a:visited,
 .SideStaticSelectedStyle a:active,
 .SideStaticSelectedStyle a:hover
 {
color: #ffffff;     
text-decoration: none;
font-weight: bold;
font-family: verdana;
font-size: 11px;
white-space:normal;
background-color: #6C85B0;
 }

 .SideStaticHoverStyle td
 {
    font-weight: normal;
    font-family:  verdana;
    background-color: #6c85b0;
    color: #ffffff;
}
 .SideStaticHoverStyle td:hover a 
 {
           color: #ffffff;
      }

 .SideStaticMenuItemStyle
 {
    font-weight: normal;
    font-family:  verdana;
    border-bottom: solid 1px #012754;
    border-left: solid 1px #012754;
    border-right: solid 1px #012754;
     border-collapse:collapse;
 }
 .SideStaticMenuItemStyle td
 {      
    padding: 2px 2px 2px 3px;
    text-align: left;
    font-weight: normal;
    font-family:  verdana;
  }
 .SideStaticHoverStyle
 {
    font-weight: normal;
    font-family: verdana;
 }

这是我的 HTML：

<asp:Menu ID="Menu2" runat="server"  Orientation="Vertical" ItemWrap="true">
            <DataBindings>
                <asp:MenuItemBinding DataMember="MenuItem" TextField="Title" NavigateUrlField="URL" />
            </DataBindings>
            <StaticMenuStyle CssClass="SideStaticMenuStyle" />
            <StaticSelectedStyle CssClass="SideStaticSelectedStyle" ItemSpacing="0px" />
            <StaticMenuItemStyle CssClass="SideStaticMenuItemStyle" ItemSpacing="0px" />
            <DynamicHoverStyle CssClass="SideDynamicHoverStyle" />
            <DynamicMenuStyle CssClass="SideDynamicMenuStyle" />
            <DynamicSelectedStyle CssClass="SideDynamicSelectedStyle" />
            <DynamicMenuItemStyle CssClass="SideDynamicMenuItemStyle" />
            <StaticHoverStyle CssClass="SideStaticHoverStyle" />
        </asp:Menu>

页面生成代码：

   <table id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2" class="SideStaticMenuStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_5 ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_2" cellpadding="0" cellspacing="0" border="0">
    <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n1">
        <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="servicelink.aspx" target="_self" style="border-style:none;font-size:1em;">ServiceLink</a></td>
            </tr>
        </table></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n2">
        <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="fnpc.aspx" target="_self" style="border-style:none;font-size:1em;">Fidelity National Property and Casualty</a></td>
            </tr>
        </table></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n3">
        <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="ceridiancorp.aspx" target="_self" style="border-style:none;font-size:1em;">Ceridian Corporation</a></td>
            </tr>
        </table></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n4">
        <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="remy.aspx" target="_self" style="border-style:none;font-size:1em;">Remy International, Inc.</a></td>
            </tr>
        </table></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n5">
        <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="abrh.aspx" target="_self" style="border-style:none;font-size:1em;">American Blue Ribbon Holdings, LLC</a></td>
            </tr>
        </table></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n6">
        <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="cascade.aspx" target="_self" style="border-style:none;font-size:1em;">Cascade Timberlands</a></td>
            </tr>
        </table></td>
    </tr><tr style="height:0px;">
        <td></td>
    </tr>
</table><a id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_SkipLink"></a>
    </td>

【问题讨论】：

你可以为菜单发布一些示例 HTML 吗？另外，尝试减少甚至删除行高。
我尝试删除没有帮助的行高。添加了我的 html 代码。
您能否发布生成的 HTML（如在浏览器中一样） - 不是 ASP 开发人员，您发布的 XML 对我来说毫无意义 :)
@Pete，添加了生成的代码。觉得里面多余的有什么关系吗？
额外的<tr>s 与它有关。您需要以某种方式删除它们 - 生成菜单的数据中是否存在空白？

【解决方案1】：

问题出在<asp:Menu /> 控件的标记中。 <StaticMenuItemStyle /> 上的 ItemSpacing="0" 是创建那些额外的 <tr /> 标记的原因。删除它，它们就会消失：

<asp:Menu ID="Menu2" runat="server"  Orientation="Vertical" ItemWrap="true">
    <DataBindings>
        <asp:MenuItemBinding DataMember="MenuItem" TextField="Title" NavigateUrlField="URL" />
    </DataBindings>
    <StaticMenuStyle CssClass="SideStaticMenuStyle" />
    <StaticSelectedStyle CssClass="SideStaticSelectedStyle" />
    <StaticMenuItemStyle CssClass="SideStaticMenuItemStyle" />
    <DynamicHoverStyle CssClass="SideDynamicHoverStyle" />
    <DynamicMenuStyle CssClass="SideDynamicMenuStyle" />
    <DynamicSelectedStyle CssClass="SideDynamicSelectedStyle" />
    <DynamicMenuItemStyle CssClass="SideDynamicMenuItemStyle" />
    <StaticHoverStyle CssClass="SideStaticHoverStyle" />
</asp:Menu>

这是我的本地机器的屏幕截图，我显示它已修复：

【讨论】：

砰！这修复了它。哇，这么简单的事情被忽略了。谢谢斯科特，一旦它允许我（说还剩 7 小时），我将奖励你赏金。谢谢
完全没问题。有趣的是我也忽略了它。我试图使用您发布的 CSS 和生成的 HTML，但无济于事。然后我说它必须是菜单本身中的一个设置，生成那些<tr /> 标签。否则他们在那里是没有意义的。所以我只是用你发布的内容自己构建了<asp:Menu />，果然我做的第一件事就是删除了ItemSpacing="0"，就像你说的，BAM！他们走了。
@thesandman - 没问题！哦，别忘了奖励赏金=D