asp.net - 菜单控件在环境之间构建和呈现不同

Question

我在我的页面上放置了以下菜单控件:

<div class="Phase2MenuContainer">
    <asp:Menu runat="server" ID="mnuHome" Orientation="Vertical"
        StaticMenuStyle-CssClass="Phase2Menu">
        <Items>
            <asp:MenuItem Selectable="true" Text="Download Sketch Sheet" NavigateUrl="~/Documents/Sketch Sheet.pdf" Target="_blank"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Create Data Sheet" NavigateUrl="CreateDataSheet.aspx"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Personalize Data" NavigateUrl="Personalize.aspx" Enabled="false"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>

当我在我的本地主机上运行它时，它使用表格构建，这很好，因为我在编写我的 css 时就知道这一点。

这里的问题是，当我将它复制到实时环境时，它使用 span 和 div 构建，所以我的所有 css 都崩溃了。

这是 css(实时副本只是删除了 margin: 5px 0; 行)

.Phase2MenuContainer
{
    width: 250px;
    margin: 15px auto;
}
.Phase2Menu a, .Phase2Menu span a
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;
    background: #018CD2;
    border: 1px solid #0159a0;
}
.Phase2Menu a[disabled=true], .Phase2Menu span[disabled=disabled]
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;    
    background: #c1c1c1;
    border: 1px solid #0159a0;
}
.Phase2Menu a:not([disabled=true]):hover
{
    background: #3B3486;
}

我花了大约半个小时来修复它，但我现在可以正常使用了(尽管实时样式表与我的测试样式表不同)。

谁能向我解释为什么我的本地主机和实时服务器之间的菜单构建不同？我敢肯定，如果操作正确，这实际上不会发生......

Answer 1

将 Menu 的 RenderingMode 设置为 Table.. 像这样。所以它总是将您的 Menu 呈现为表格...

<asp:Menu runat="server" ID="mnuHome" Orientation="Vertical" RenderingMode="Table"
        StaticMenuStyle-CssClass="Phase2Menu">