asp.net - IE8 互換モード Asp.net メニューのパディングの問題

Question

特定の IE8 モードおよび他の IE ブラウザで、以下に示すように、メニュー項目が各メニュー項目の下部に余分なスペースを持つように変更される ASP.net 垂直メニューに問題があります。

（左が悪い、右が良い）。これは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>

score 2 · Accepted Answer

問題は、<asp:Menu />コントロールのマークアップにあります。ItemSpacing="0"にそれらの余分なタグ<StaticMenuItemStyle />を作成するものです。<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>

これが私のローカルマシンのスクリーンショットで、修正されたものを示しています。

ここに画像の説明を入力してください

score 2 · Accepted Answer

実際にテキストを含むこれらのタグの間に、余分な TR および TD タグがいくつかあります。これらを外せばOKです

asp.net - IE8 互換モード Asp.net メニューのパディングの問題

2 に答える 2

Related

Reference