在不同的环境中，菜单控件的构建和呈现方式不同

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时就知道了这一点。

这里的问题是，当我把它复制到live环境时，它会用span和div构建，所以我所有的css都坏了。

这是css (live copy只是删除了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渲染为table…

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

Answer 2

两天前我遇到了同样的解决方案，不幸的是，RenderingMode在我的项目中不起作用，因为ASP。. NET支持的版本。因此，作为另一种解决方案，我将menu放在div控件中，并将样式表设置为如下所示:

.div br {
    display: none;
}